Search documentation

Search docs pages and sections

  • Docs home
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
DS Manager
  • DS Manager
  • Quickstart
  • Interface tour
  • Styles and icons
  • Colors and tokens
  • Typography
  • Radius, spacing and shadow
  • Controls
  • Brand
  • Editing components
  • Variants and states
  • Breakpoints
  • Custom components
  • ProBlocks
  • Design agent
  • MCP server
  • Lint locks
  • Publish and install
  • Share links and forks
  • Comments
  • Plans and limits
Licensing
  • Licensing agreement
  1. Documentation
  2. Select and install Pro Blocks

Menu

HomePreviewPricingRoadmapHelp & Contact

Products

shadcn Componentsshadcn BlocksAgent SkillsDS ManagerNewFigma Pluginshadcn Templates

Resources

shadcn ThemesTheme GeneratorDocsAcademyBlogIcons

Legal

Licensing AgreementTerms & ConditionsPrivacy PolicyCookies

Components

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

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

Select and install Pro Blocks

Use the Figma to shadcn/ui plugin to select and install Pro Blocks directly from your Figma designs.

Pro Blocks

The Pro Blocks tab in the Figma to shadcn/ui plugin allows you to accelerate your development by providing ready-to-use CLI commands for installing pre-designed Pro Blocks components directly into your shadcn/ui projects.

Feature overview

Instead of manually looking up component names or constructing CLI commands, this feature streamlines the process:

  1. You select designated Pro Blocks elements within your Figma design.
  2. The plugin generates the precise npx shadcn@latest add ... command.
  3. You copy this command and run it in your project's terminal to install the components.

Prerequisites

Before using the Pro Blocks feature, please ensure the following:

  • Valid license key: You must have a valid Premium Package license key entered and verified within the plugin settings.
  • You can find your license key in your Customer Portal.
  • To enter or verify your key, navigate to the Settings tab within the plugin.
  • Correctly named Figma elements: The components you wish to install must be present in your Figma file as elements whose names start with the prefix Pro Blocks /.
    • For example: Pro Blocks / Hero Section / 1.