Codelevate symbol
DESIGN SYSTEM

Figma design system based on ShadcnUI

A production-ready Shadcn/UI Figma design system with 1,490+ components, 2,500+ assets, light/dark mode, charts & templates

200+ downloads on Figma

Preview in Figma

1490+
UI components
2,500+
Icons and assets
50+
Responsive pages
22+
Colour palettes

All-in-one design system

Everything you need to build a comprehensive SaaS platform, E-commerce or Website

1490+ UI components

Choose from different button components, navigation bars, input fields, lists, forms and 1490+ more UI components

  • Checkmark
    All components have properties, auto-layout and variants
  • Checkmark
    Based on ShadcnUI
  • Checkmark
    Choose from 1490+ UI components
Figma Design System Tailwind CSS
Figma Design System Tailwind CSS

Dark mode

All of the components, sections, and pages fully support dark version in the form of Figma variants

  • Checkmark
    Switch between white or dark mode with one click
  • Checkmark
    Easily edit and revert back changes
  • Checkmark
    Choose from 50+ ready-made dark mode sections
Get lifetime access

50+ pre-built pages

Our design system offers a comprehensive suite of 50+ custom pages, featuring everything from application UI dashboards to marketing landing pages. Every page is responsive, supports dark mode, and is simple to customize with Figma variants for seamless editing

  • Checkmark
    Save time designing websites from scratch
  • Checkmark
    Switch between white or dark mode with one click
  • Checkmark
    Choose from E-commerce, SaaS or marketing pages
Figma Design System Tailwind CSS

Choose your favourite plan

Trusted globally by freelancers, startups, businesses, and enterprises

Basic
Free
Single license
€89.99
Team license
€169.99
User license
1 user
1 user
Core UI components
Text styles
Shadow styles
Component variants
Properties
Auto-layout
Dark mode
PRO UI components
Icons (by Google Material)
Illustrations (by TanahAir Studio) 
PRO UI sections
Application UI pages
E-commerce UI pages
Marketing UI pages

Common questions

What exactly do I get after purchase?

You get access to the full Figma design system (foundations, components, blocks/templates, charts, and assets).

What does "lifetime access" exactly mean?

By purchasing our Shadcn/UI Design System Kit, you secure lifetime access to the product at no additional cost.

What is the difference between single and team license?

The single license is designed for individual use in Figma, perfect for freelancers or solo designers and developers. It cannot be shared with internal teams or other users.

For collaborative projects, opt for the team license, allowing you to share the Figma file with anybody in your team.

Can I use the design system for commercial purposes?

Definitely! This design system is perfect for any commercial project, from SaaS platforms to e-commerce apps, and application UIs. The only restriction is against reselling it as a design resource. Beyond that, you're free to use it for any commercial projects that you are currently workin on.

Can I create or sell templates or themes using it?

Our product is not permitted for use in creating templates, UI kits, dashboards, or web builders intended for distribution on your website or other marketplaces.

Prohibited uses include distributing Shadcn/UI Figma design system elements publicly, creating alternative versions of the design system, and developing website builder projects that compete directly with our products.

Do I need a paid Figma plan?

In most cases, no. If your workspace/team/library workflow requires paid features, Figma may prompt accordingly, but the kit itself works as a standard Figma file.

Can I get invoice?

During the checkout process, you'll have the opportunity to include all personal or company details you wish to appear on the invoice. After your purchase, you will receive the invoice via email. If you miss filling in your information or don't receive the invoice, please contact us for assistance.