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
  1. Documentation
  3. Getting started

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

Getting started

Welcome to the Quick Start guide for shadcndesign! This page walks you through the basics of getting started with our Figma kit.

Once you open the file you've purchased, you are good to go and can start designing immediately.

There are two methods to get started depending on your needs and Figma plan.

Figma free plan

If you have a free Figma account, you can import the UI kit file to your drafts and open it. You can start designing right away.

Figma paid plan

You can also import the file to your drafts, move it to your Figma workspace, and publish it as a library. The shadcn/ui kit for Figma can then be shared across your team and projects, ensuring consistency and efficiency in your design workflow. Publishing to your team library is optional.

Before you publish the UI kit to your workspace

The kit includes all five icon libraries. Choose a single library and remove the rest to reduce your Figma file size — a smaller file loads faster and makes component search more responsive.

  1. Choose your icon library and enable it. See the icons documentation for instructions.
  2. Open the Icons page.
  3. In the IconPlaceholder component, delete the instances for any libraries you no longer need.
  4. Delete the Figma pages associated with the removed libraries.
  5. In the Style collection, delete the icon-library/* booleans for the libraries you removed.

Publishing the UI kit to your workspace

Here's Figma's guide on how to publish the UI kit to your workspace. To learn more about Figma libraries, check out the official documentation.

Publishing to Figma library

Key benefits of using the shadcn/ui kit as a library:

  • Consistency: Maintain a unified design language across all your projects.
  • Efficiency: Quickly access pre-built components and styles without recreating them.
  • Collaboration: Easily share the UI kit with your entire team or organization.
  • Version control: Update the main library to sync changes across all linked projects.
  • Flexibility: Customize components in individual projects without affecting the main library.

Learn Figma

If you're new to Figma, we highly recommend visiting its Getting Started help page or watching the Beginner's Guide to Figma on its YouTube channel.

Components

The shadcn/ui kit for Figma is built with components — reusable elements that help you create and manage consistent designs across projects. You can learn more about components here.

Variants

The UI kit uses Variants, which group and organize similar components into a single container. This simplifies the library and makes it easier to find what you need. Here are more details on variants.

Auto Layout

The system's components were built with Auto Layout, which lets designs grow to fill or shrink to fit and reflow as their contents change — just like on a real website. You can learn more about Auto Layout here.

Styles

The kit is built with Figma Styles, including text styles and effect styles, that can be reused across your designs. One file carries all 8 shadcn/ui styles as variable modes — see the styles documentation. Learn more about Figma Styles here.

Variables

The kit is built with variables — reusable values applied across design properties and prototyping actions. They save time when building designs and managing design systems. See our variables documentation for how the kit organizes them, or learn more about Figma variables here.