Skip to main content
Several high-quality Figma kits are available for shadcn/ui, allowing you to design interfaces that match your implementation perfectly.
The Figma files listed below are created and maintained by the community. For questions or feedback, please reach out to the respective maintainers.

​
Free Resources

These Figma kits are available at no cost:

​
Obra shadcn/ui

Obra shadcn/ui by Obra Studio
  • Carefully crafted shadcn/ui component kit
  • MIT licensed
  • Maintained by a team of designers
  • Includes free design-to-code plugin
  • Regular updates to match the latest shadcn/ui components

​
shadcn/ui components

shadcn/ui components by Sitsiilia Bergmann
  • Well-structured component library
  • Aligned with the shadcn component system
  • Regularly maintained and updated
  • Clean, organized file structure

​
shadcn/ui design system

shadcn/ui design system by Pietro Schirano
  • Design companion for shadcn/ui
  • Components painstakingly crafted to match code implementation
  • Pixel-perfect alignment with actual components
  • Comprehensive component coverage

​
Premium Resources

These paid options offer advanced features and professional support:

​
shadcn/ui kit

shadcn/ui kit by Matt Wierzbicki
  • Premium, always up-to-date UI kit
  • Optimized for smooth design-to-dev handoff
  • shadcn/ui compatible
  • Professional quality components

​
Shadcraft UI Kit

Shadcraft UI Kit
  • Most advanced shadcn-compatible kit
  • Instant theming via tweakcn
  • Pro library of components and templates
  • Complete coverage of shadcn components and blocks
  • Advanced customization options

​
shadcn/studio UI Kit

shadcn/studio UI Kit
  • Accelerate design and development workflow
  • shadcn/ui compatible Figma kit
  • 550+ blocks for rapid prototyping
  • 10+ pre-built templates
  • 20+ theme variations
  • AI tool that converts designs into shadcn/ui code
  • Updated components matching latest releases

​
Working with Figma Kits

1
Choose a kit
2
Select a Figma kit that matches your needs and budget. Free options are great for getting started, while premium kits offer more features and support.
3
Import components
4
Once you’ve selected a kit:
5
  • Duplicate the file to your workspace
  • Enable the component library
  • Start using components in your designs
    • 6
    Customize the theme
    7
    Most kits support theme customization:
    8
  • Update color variables to match your CSS variables
  • Adjust border radius values
  • Customize typography settings
    • 9
    Design your interface
    10
    Build your interface using the Figma components:
    11
  • Use auto-layout for responsive designs
  • Leverage component variants for different states
  • Create instances of components in your frames
    • 12
    Export and implement
    13
    After designing:
    14
  • Use the kit’s export features or plugins
  • Match Figma designs with shadcn/ui component props
  • Implement using the actual shadcn/ui components

    • ​
    Design-to-Code Workflow

    To ensure your Figma designs match your implementation:

    ​
    Color Variables

    Map Figma color variables to your CSS variables:
    Create variables in Figma:
    • background
    • foreground
    • primary
    • primary-foreground
    • secondary
    • muted
    • border
    • input
    • ring

    ​
    Typography

    Match Figma text styles to your implementation: 
    // h1 in Figma
text-4xl font-extrabold tracking-tight

// h2 in Figma
text-3xl font-semibold tracking-tight

// Body in Figma
leading-7

    ​
    Spacing

    Use Tailwind spacing values in Figma:
    • 4px = 0.25rem = spacing-1
    • 8px = 0.5rem = spacing-2
    • 16px = 1rem = spacing-4
    • 24px = 1.5rem = spacing-6

    ​
    Tips for Consistency

    • Keep your Figma variables in sync with your CSS variables
    • Use the same border radius values in Figma and code
    • Document component variants and their corresponding props
    • Create a shared design token system

    ​
    Prototyping with Components

    Build interactive prototypes:
    1. Use component variants for interactive states (hover, active, disabled)
    2. Create prototype flows with component interactions
    3. Test user flows before implementation
    4. Share prototypes with stakeholders for feedback

    ​
    Collaboration

    When working in a team, establish clear naming conventions for components, variables, and styles to ensure consistency between design and code.
    Best practices for team collaboration:
    • Use a single source of truth for design tokens
    • Document component usage and guidelines
    • Regular sync meetings between designers and developers
    • Version control for both Figma files and code

    ​
    Resources

    Build docs developers (and LLMs) love

    Get started for freeTalk to us