Sarah
Sebastien
From Figma to Nuxt, faster.
From wireframe to production in no time with the official Nuxt UI & Nuxt UI Pro design kits for Figma. Start free with the Nuxt UI Kit, or upgrade to Nuxt UI Pro for premium components, layouts, and enhanced design-to-code efficiency.
- Advanced Figma FeaturesComponents, Local Variables, Auto Layout, Variants and more.
- Instant ThemingCustomize your design system instantly using local variables and tokens.
- Two Powerful Design KitsStart with essential components, or unlock Pro for complete blocks and templates.
Everything you need in a single file.
Design and development in perfect sync with our Free and Pro files. Developers can implement designs faster, while designers work with production-ready components.
Customize in a few clicks to fit your needs
Control your entire design system with Figma Variables. Update primitive tokens once and watch your changes spread across the entire system.
- Style with color variables powered by Tailwind CSS colors
- Apply over 500+ local variables across your entire file
- Build with unified tokens for consistency
One component, endless possibilities
Create unlimited variations through nested components and swappable instances. Every element is fully themeable with props and slots, giving you complete control.
- Choose between 17K+ components and variants
- Customize designs with swap instance
- Switch between light and dark modes in one click
Perfect match with development
Our Figma kit perfectly matches Nuxt UI Pro components, ensuring complete alignment between design and development.
- Match development standards using the same props and tokens
- Access Nuxt UI components through direct links
- Work together as design and dev teams share one component language
Start designing now.
From download to deployment in simple steps.
Get instant access to production-ready components and start creating.
Get instant access to production-ready components and start creating.
1 Download & Import
After purchasing, just extract the ZIP file and drag & drop it directly into Figma.
2 Customize to your brand
Set your colors, typography, and styles to match your brand identity in minutes.
3 Design your website
Design beautiful interfaces with production-ready components. Drag, drop, and customize.
4 Share it with your developers
Perfect development handoff with components that match Nuxt UI's structure exactly.
- Ready-to-use TemplatesProduction-ready templates for marketing sites, documentation, and more included.
- Well-Documented SystemComplete guides for designers and developers to master your design system.
- Icons PackComplete Lucide icon library included - 1500+ ready components.
Pricing plan that scale with you.
Start for free with Nuxt UI components, or unlock the complete Nuxt UI Pro design kit with a one-time purchase.
Free Design Kit
Start with all Nuxt UI components and tokens.
FREE
- Nuxt UI only components
- 40+ fully customizable components
- Figma Local Variables for colors, typography, and effects
- Light and Dark mode ready
- Lucide icons (1500+ icons) integration
- Regular updates
Used by 17,000+ designers.
Solo License
Design faster with all Nuxt UI Pro components.
$149
one-time paymentplus local taxes
- 1 Designer
- Nuxt UI & Nuxt UI Pro Components
- Templates: Landing, Documentation, etc
- Quick Start with Step-by-step Guides
- Use on Unlimited Projects
- Lifetime Free Updates
Team License
Everything you need to deliver faster as a team.
$349
one-time paymentplus local taxes
- Up to 20 Designers
- Nuxt UI & Nuxt UI Pro Components
- Templates: Landing, Documentation, etc
- Step-by-step guides to help you start
- Use on unlimited projects
- Lifetime free updates
Used by 2,000+ developers & designers around the world.
Frequently Asked Questions
If you can't find what you're looking for, email our support team and if you're lucky someone will get back to you.
Yes. You don't need Figma's paid plan to use our UI kits.
We don't offer a free trial for the Pro Figma Kit, you can preview it.
After purchasing, just extract the ZIP file and drag & drop it directly into Figma.
Yes! Email us at design@nuxt.com with your details and we'll send you a discount code.
Yes, the license allows you to sell your designs that utilize the UI Kit implementations.
Yes, you can create multiple projects for multiple clients with the same license, there is no limit to the number of projects you can create.
No, the license does not allow you to include the UI Kit in an open source project where the design files are publicly accessible.
Email us at design@nuxt.com with your details and we'll help you out.
As the Figma Pro Kit is a digital product packaged as a zip file, we cannot offer refunds once the purchase is made.
We recommend the open source TeamPad Dev inspect panel with the TeamPad Dev Nuxt UI Plugin:
Right now, only Nuxt UI components are supported, but the code of the plugin is open source and anyone can contribute to it.
- Install the TeamPad Dev Chrome Extension
- Open your Figma file with Nuxt UI components (reload the page if you don't see the TeamPad Dev panel)
- Install the
@nuxtin TeamPad Dev's plugins section - Select any Nuxt UI component and inspect the code it generates
Right now, only Nuxt UI components are supported, but the code of the plugin is open source and anyone can contribute to it.