A comprehensive collection of base shadcn/ui components adapted for Webflow Code Components. These components can be dropped into any Webflow site and configured visually through the Webflow Designer.
- Card - Flexible content container with consistent styling
- Avatar - User profile images with fallback support
- Badge - Small status indicators and labels
- Alert - Important messages and notifications
- Button - Primary and secondary action buttons
- Input - Text input fields with validation states
npm installTo start the development server and preview components:
npm run devVisit http://localhost:3000 to see the component showcase and ensure everything loads correctly.
To make these components available in your Webflow workspace:
npx webflow library shareThis will create a code library containing the exposed shadcn/ui components in your designated Webflow workspace.
components/ui/*.tsx- Original shadcn/ui componentscomponents/ui/*.webflow.tsx- Webflow Code Component definitions
Each shadcn/ui component has been adapted for Webflow:
- Base Component: The original shadcn/ui component (e.g.,
button.tsx) provides the core functionality - Webflow Wrapper: A corresponding
.webflow.tsxfile exposes the component to Webflow with appropriate props that map Webflow component props to React props - Visual Configuration: Designers can configure component behavior through the Webflow Designer settings panel
- Consistent Styling: All components use the shadcn/ui design system with Tailwind CSS classes
- Install Library: Add the shared component library to your Webflow site. See the quick start guide to ensure your Webflow site meets prerequisites
- Drag & Drop: Use components from the Components panel
- Configure Props: Customize behavior through the Settings panel
- Compose Components: Combine individual components to create complex UI patterns