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. Typeset

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

Typeset

Export and import typeset.css between the shadcn/ui kit for Figma and your project with the Figma to shadcn/ui plugin.

Typeset export and import

The kit includes a Typeset system — a prose/markdown scale mirroring shadcn/ui's typeset.css. The plugin has a dedicated Typeset tab in the main tab bar (next to Manage Variables) with its own Export and Import tabs. It runs locally and does not use any AI credits.

Export typeset.css

  1. Open the plugin in your kit file and go to the Typeset tab.
  2. On the Export tab, pick a size mode (14px, 15px, 16px, or 18px).
  3. Click Generate typeset.css overrides and copy the result.

The plugin generates a small typeset.css override block containing your knobs: --typeset-size, --typeset-leading, --typeset-flow, and the --typeset-font-* families. If you hand-tuned any values away from the standard ramp, the plugin detects those and notes them in the output.

The base typeset.css ships with shadcn/ui — this block only carries your overrides. Paste it into your project after the base file.

Import typeset.css

  1. On the Import tab, paste a typeset.css (or just its .typeset block).
  2. Click Apply to Figma.

The plugin applies it back into the kit: it switches to (or creates) the matching size mode and applies your leading, flow, and font choices.

Because Typeset colors reuse the theme tokens, prose follows light/dark and restyles with the active style automatically. Learn more about the system on the Typeset page.