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
  2. Updates

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

Updates

Every time we release a new update, you can access the new files via the Customer Portal. We provide updates to align with the latest shadcn/ui releases and incorporate user feedback. We also aim to provide updates when there's a new Figma feature or shadcn/ui component.

How to get new updates?

Log in to our Customer Portal with the email you used to make the purchase.

If you don't remember which email you used, try every address you might have used. If you're still stuck, contact us at hi@shadcndesign.com.

Code not arriving?

  • Wait 5 minutes for the server to process the request.
  • Make sure your mail server can accept messages from the @polar.sh domain.
  • Check your junk/spam inbox.
  • If none of the above works, contact our partner: support@polar.sh

How do the updates work?

For Figma resources, updates are new Figma files that most often introduce new components or blocks, along with minor fixes and refinements. You can keep using your current version without disrupting your workflow. For code resources (the React and Premium packages), updates land in the registry: installing a block or template again with the shadcn CLI pulls the latest version.

Keep in mind that Figma is file-based, not a code repository, so updates can't be installed automatically like software packages. When we publish an update, it won't appear in your Figma library on its own, nor can it be "installed" with a single action.

Given this, we recommend copying over any new components you need from the updated file into your existing project. This lets you selectively incorporate the improvements most relevant to your work.

We rarely release major updates — usually when the official shadcn/ui receives a significant change. In those cases it's best to stick with the version you started your project on. Updating to a newer major version can be challenging because Figma treats each file separately: you'd need to manually transfer new components and tokens, which is harder still if you modified tokens or added your own components. We therefore recommend adopting new major versions only for new projects.

Updating variables to the kit 3.0 color model

Kit 3.0 (September 2026) changed how colors are defined: the Tailwind palette moved to the Tailwind CSS v4 values, every base color token aliases that palette, and the custom/* and alpha/* tints are built with Figma's alias with opacity instead of flattened colors. A 2.x file keeps working as it is, but if you want the new model in a kit you already customized, the shadcn-design-update agent skill can migrate the variables in place. It keeps the colors you changed and only converts values that still match the stock kit; the report lists everything it left alone. Save a named version first.


Adding new components to your library

This guide shows how to add new components from the latest shadcn/ui Figma kit to an existing custom library based on an older version, while preserving your styling.

Prerequisites

  • Figma Pro account (or higher) for publishing libraries
  • Your custom library based on an older shadcn/ui kit for Figma
  • The latest version of the shadcn/ui kit for Figma
  • The Swap Variables Figma plugin

Step-by-step guide

Step 1: Open libraries

  1. Open your custom library file in Figma.
  2. Open the latest shadcn/ui kit for Figma file.

Step 2: Publish libraries

  1. Publish both libraries to your Figma workspace.
  2. Wait for all components to finish publishing.
  3. Reload both files.

Step 3: Add a new component

  1. Add the variables related to the new component to your existing library.
  2. Copy the new component from the latest UI kit.
  3. Paste it into your project file.

Step 4: Swap libraries

  1. In your library, locate the "Assets" button (book icon).
  2. Find and open the latest shadcn/ui kit under "Libraries used in this file".
  3. Click "Swap library".
  4. In the Swap library window, choose your custom library.
  5. Review the list of styles and components to be replaced.
  6. Click "Swap Library" to apply.

Step 5: Use the Swap Variables plugin

  1. Open the Swap Variables plugin.
  2. Select the newly added component in your project.
  3. Choose "Local Variables".
  4. Click "Swap Variables".

Step 6: Verify changes

Switch between light and dark modes on the new component. Confirm it uses your custom styling, including correct backgrounds for elements like input fields.

If some variables or components didn't swap, manually swap those instances with ones from your file.