Search documentation

Search docs pages and sections

Figma Kit
  • Getting started
  • Styles
  • Variables
  • Typeset
  • Theming
  • Components
  • Icons
  • Development
  • Updates
Registry
  • Pro Blocks
  • Templates
  • Themes
Plugin
  • Introduction
  • Generate code
  • Manage variables
  • Typeset
  • Select and install Pro Blocks
  • Security
Agent Skills
  • Agent Skills
Licensing
  • Licensing agreement
  1. Documentation
  3. Themes

Menu

HomePreviewPricingRoadmapHelp & Contact

Products

Figma KitPro BlocksAgent SkillsNewFigma PluginTemplates

Resources

Free ThemesTheme GeneratorDocsAcademyBlogIcons

Legal

Licensing AgreementTerms & ConditionsPrivacy PolicyCookies

Components

AccordionAlertAlert DialogAspect RatioAttachmentAvatarBadgeBreadcrumbBubbleButtonButton GroupCalendarCardCarouselChartCheckboxCollapsibleComboboxCommandContext MenuData TableDate PickerDialogDrawerDropdown MenuEmptyFieldFormHover CardIcons - HugeIconsIcons - Lucide IconsIcons - Phosphor IconsIcons - Remix IconIcons - Tabler IconsInputInput GroupInput OTPItemKbdLabelMenubarMessageMessage ScrollerNavigation MenuPaginationPopoverProgressQuestionnaireRadio GroupResizableScroll-areaSelectSeparatorSheetSidebarSkeletonSliderSonnerSpinnerSwitchTableTabsTextareaToastToggleToggle GroupTooltipTypesetTypography

Landing Page Blocks

404 SectionsBannersBento GridsBlog SectionsCTA SectionsComparison SectionsContact SectionsEmpty LP SectionsFAQ SectionsFeature SectionsFootersGallery SectionsHeader SectionsHero SectionsLP NavbarsLanding Page ExamplesLogo SectionsPatternsPricing SectionsRich Text SectionsStats SectionsTeam SectionsTestimonials Sections

Application Blocks

App ShellsApplication ExamplesButtonsCardsDescription ListsEmpty SectionsNavbarsPage HeadersSection FootersSection HeadersSectionsSettingsSign inSign upTable Headers

E-commerce Blocks

CheckoutsExamplesIncentivesOrder Summary SectionsProduct Category SectionsProduct HeadersProduct List FiltersProduct List SectionsSale SectionsShopping CartsStore Navbars

This project is independent and not affiliated with Figma or shadcn/ui.
Copyright © 2026 Matt Wierzbicki

Themes

Learn how to install our free themes directly in your shadcn/ui project, or import them into your Figma file as a new style.

Using CSS from the Theme Generator

If you created a theme in our Theme Generator and copied the CSS, use it in your project like this:

  1. Make sure you have shadcn/ui installed.
  2. Paste the CSS into your global stylesheet (e.g. app/globals.css). Replace the @theme inline, :root, and .dark blocks with the properties you copied.
  3. Load the fonts used by your theme. The generator shows the font names (e.g. Inter, Geist). Add the corresponding Google Fonts (or other) <link> in your root layout (layout.tsx) so --font-sans and --font-heading resolve correctly.

After that, your components use the new theme variables automatically.

Free themes installation

If you want to install our free themes, you can install them with the latest shadcn CLI 3.0. Themes are CSS-only, so they work with both the Radix UI and Base UI versions of shadcn/ui.

  1. Ensure shadcn/ui is installed in your project. If not, install it now.
  2. Copy the CLI command from our Themes page. For example: npx shadcn@latest add @shadcndesign/theme-sketchpad
  3. Run the command in your project's terminal.
  4. After installation, import the font used by the chosen theme in your layout.tsx file.

Importing themes into Figma

You can import a theme into the shadcn/ui kit for Figma as a new style and start designing with it in minutes. Because a custom theme is a mode in the Style collection, it lives alongside the 8 built-in styles and you can switch to it on any page or frame.

  1. Open your shadcn/ui kit for Figma file.
  2. Choose a theme and copy its CSS.
  3. Open the Figma to shadcn/ui plugin.
  4. Go to the Import tab.
  5. Choose Add as a new style and pick which of the 8 built-in styles to base it on (default Nova).
  6. Paste the copied CSS into the text area.
  7. Click Import. The plugin creates a new mode in the Style collection with the theme's colors, radius, and fonts applied.

You can also choose Overwrite an existing style if you'd rather replace one of the built-in styles with the imported values instead of adding a new mode. Note that adding a new mode is subject to your Figma plan's modes-per-collection limit (the Style collection already has 8) — if adding isn't available on your plan, use Overwrite.