Interactive demo showcasing design system integration with shadcn/ui and tweakcn
Props
badgeTextOptionalText displayed in the badge above the section title
Default:
"Design System"sectionTitleOptionalMain heading for the section
Default:
"Complete Styling Control"sectionSubtitleOptionalSubtitle text below the section heading
Default:
"Full design system integration with shadcn/ui core tokens and libraries like tweakcn"feature1TitleOptionalTitle for the first feature
Default:
"CSS Variables"feature1DescriptionOptionalDescription for the first feature
Default:
"All components use CSS custom properties that automatically adapt to your design system. Change once, update everywhere."feature2TitleOptionalTitle for the second feature
Default:
"shadcn/ui Compatible"feature2DescriptionOptionalDescription for the second feature
Default:
"Built on the same design tokens as shadcn/ui. Drop in any shadcn component and it just works with your theme."feature3TitleOptionalTitle for the third feature
Default:
"tweakcn Ready"feature3DescriptionOptionalDescription for the third feature
Default:
"Fully compatible with tweakcn and other design tools. Adjust colors, spacing, and typography with zero code changes."showBadgeOptionalToggle the badge visibility above the section title
Default:
trueUsage
<StylingControlSectionWrapper badgeText="Design System" sectionTitle="Styling Control" showBadge={true} />Category
LandingLibrary
webcn Landing Page
webcnFile Path
src/libraries/webcn/components/StylingControlSection.webflow.tsx