Brickslab.Toolsv2.1.1

Brickslab.Tools

Build UIs withtheme tokens.

0 outils pour configurer vos thèmes et composer vos écrans, appuyés sur 0 composants documentés.

Lancer Theme BuilderOuvrir Mockup Builder
Theme BuilderMockup BuilderReact 19TypeScriptCSS TokensNext.js 16
AppShellHeaderBarFooterBarSidebarNavBurgerMenuTopNavBentoGridLogoMarkSearchBarMenuTreeBreadcrumbMediaCarouselMarqueeAnimatedListAnimatedStackHeadingTextTextBlockButtonInputSelectTextareaTagChipStatusLabelToggleSwitchAvatarCirclesConfettiConfettiButtonThemeTogglerThemeToggleSimpleMediaImageLocationMapCopyButtonIntroCardTextCardBentoCardSocialPostCardSectionExampleCardSectionGallerySectionHeaderHeroCTASectionFeatureListSectionCarouselWithTextSectionBrandSloganSocialLinksFooterLinksFooterLegalFooterContactLinkListCodeBlockComponentDetailPanelComponentPresentationSectionPropsTableProjectDescriptionPanelComponentCardDocPageHeaderPageHeroTopbarSidebarSearchResultsThemeToggleComponentsCountCardLatestComponentsListTestResultsCardKpiCardDashboardHeroQuizBuilderQuizSectionQuestionCardQuestionRendererConditionalLogicSingleChoiceMultiChoiceScaleLikertRatingStarsNPSQuestionRangeSliderQuestionFreeTextQuestionMatrixQuestion
RankOrderQuestionQuizProgressQuizTimerQuizNavigationQuizSubmitBarQuizResultSummaryAnswerReviewResponseTableInsightCardsSurveyFunnelDistributionChartHeatmapMatrixCohortTrendsSegmentFilterBarDashboardGridKPITrendWidgetAnomalyBadgeDrilldownPanelTooltipAlertBadgeProgressBarCalloutSpinnerCheckboxRadioTabsAccordionTextAnimateTypingAnimationAuroraTextNumberTickerAnimatedGradientTextTextRevealWordRotateHyperTextSparklesTextTextHighlighterNoiseRevealTextVariableFontWarpTextMagneticTextKineticUnderlineTextShimmerBorderTextGlowPulseTextSegmentEmphasisTextProgressiveBlurTextWarpBackgroundFlickeringGridAnimatedGridPatternRetroGridRippleBackgroundDotPatternGridPatternStripedPatternInteractiveGridPatternLightRaysBackgroundNoiseMeshBackgroundGlassAuroraBackgroundButtonMobileInputMobileCheckboxMobileRadioMobileToggleSwitchMobileBadgeMobileTabsMobileAlertMobileProgressBarMobileSpinnerMobileSelectMobileTextareaMobileAccordionMobileCalloutMobileStatusLabelMobileTagChipMobileTextMobileHeadingMobileAppShellMobileScreenMobileCardMobile
Pourquoi Brickslab

Un design system pensé pour la production

Chaque composant respecte les mêmes conventions, tokens et standards de qualité.

Theme Builder intégré

Ajustez couleurs, typo, espacement et exportez des tokens prêts à brancher dans votre app.

Mockup Builder visuel

Assemblez des écrans par blocs, modifiez les props en direct et prototypez rapidement.

Workflow cohérent

Un même socle de composants entre les outils, le catalogue et l’implémentation produit.

Export orienté prod

Récupérez CSS tokens et snippets de code pour passer du prototype à la prod sans friction.

Composants prêts à l’emploi

Catalogue web/mobile documenté avec démonstrations réelles pour accélérer l’intégration.

Stack moderne

Compatible React 19 + Next.js 16 avec un monorepo pensé pour itérer vite.

Outils + composants

Les briques des outils, prêtes pour vos écrans.

Theme Builder et Mockup Builder s’appuient sur le même socle de composants que le catalogue.

ButtonVoir
Badge · TagChipVoir
StableBetaDeprecatedNew
ReactTypeScriptCSS
SpinnerVoir
sm
md
lg
slow
fast
ToggleSwitch — interactifVoir
CalloutVoir

Info

Un composant prêt à l'emploi.

Astuce

Utilisez les tokens CSS pour personnaliser.
Animated TextVoir
Design systemQualité & performancePrêt pour la production
Comment ça marche

Créez votre UI en 3 étapes.

Brickslab.Tools relie design tokens, prototypage et composants de production dans un flux unique.

01Configurez votre thème

Dans Theme Builder, personnalisez couleurs, typographies, rayons, ombres et variables globales.

Export CSS tokens prêt à importer

02Composez vos écrans

Dans Mockup Builder, assemblez les composants, ajustez leurs props et testez la mise en page responsive.

Preview visuelle immédiate

03Passez en implémentation

Réutilisez les mêmes composants dans votre app React/Next et branchez les tokens générés.

Du prototype à la prod

Prêt à builder

Vos outils UI,
prêts pour la production.

Lancez Theme Builder pour définir votre système visuel, puis Mockup Builder pour assembler vos pages avec nos composants web/mobile documentés.

Lancer Theme BuilderOuvrir Mockup Builder
2
outils interactifs
137
composants web
21
composants mobile
1 flux
de l'idée à la prod