New update
The newest Tailwind v4 and shadcn/ui version is now supported in our Figma kit, Plugin and Pro Blocks!
shadcn
design
Components
Pro Blocks
Plugin
Templates
Resources
Docs
Updates
Roadmap
Help & Contact
Pricing
Pro Blocks
Settings
Settings
Settings pages for user preferences and configuration options - built with shadcn/ui.
View blocks
Preview in Figma
Preview
Docs
Basic settings page with header and forms inside cards
settings-1
npx shadcn@latest add "https://shadcndesign-pro-blocks.vercel.app/components?name=settings-1&key=YOUR_LICENSE_KEY"
Get access in
Premium
Settings page with separated sections
settings-2
npx shadcn@latest add "https://shadcndesign-pro-blocks.vercel.app/components?name=settings-2&key=YOUR_LICENSE_KEY"
Get access in
Premium
Settings with stacked card sections
settings-3
npx shadcn@latest add "https://shadcndesign-pro-blocks.vercel.app/components?name=settings-3&key=YOUR_LICENSE_KEY"
Get access in
Premium
Settings page with sidebar and integrations cards
settings-4
npx shadcn@latest add "https://shadcndesign-pro-blocks.vercel.app/components?name=settings-4&key=YOUR_LICENSE_KEY"
Get access in
Premium
Settings page with header and stacked sections
settings-5
npx shadcn@latest add "https://shadcndesign-pro-blocks.vercel.app/components?name=settings-5&key=YOUR_LICENSE_KEY"
Get access in
Premium
Settings page with notifications sections
settings-6
npx shadcn@latest add "https://shadcndesign-pro-blocks.vercel.app/components?name=settings-6&key=YOUR_LICENSE_KEY"
Get access in
Premium
Settings page with stacked card layout and aside navigation
settings-7
npx shadcn@latest add "https://shadcndesign-pro-blocks.vercel.app/components?name=settings-7&key=YOUR_LICENSE_KEY"
Get access in
Premium
Pro Blocks are now fully supported in Figma Sites, allowing you to create responsive websites directly within Figma's new website builder.
Get access to coded Pro Blocks in our
Premium Package
Buy now