shadcn/ui

by shadcn

Beautifully designed, accessible React components that you own and customize.

shadcn/ui design system and component library preview

Design notes

shadcn/ui is an open-code component collection and distribution workflow for React applications. Rather than treating UI as a closed package, it lets teams bring component source code into their project and adapt the structure, styles and behavior to their own design system.

Its component examples, blocks and registry ecosystem make it useful to designers working closely with frontend engineers. It is a practical starting point for production interfaces that need consistent patterns without giving up control of the implementation.

The week’s best websites, apps and tools, once a week.

More Tools

Nerio
Sponsor
An open-source React design system for product teams building SaaS and fintech interfaces.
Plinth
Sponsor
A private, browser-based device mockup maker with customizable frames, multi-device layouts and polished image or video export.
Shaders Gallery
Sponsor
Explore, customize and export animated WebGL shader presets for digital products and visual experiments.
coss ui
Open-source UI components built with Base UI and Tailwind for refined product interfaces.
HeroUI
Accessible React components with a cohesive visual language and theming tools.
Magic UI
Animated React components and expressive effects for standout web interfaces.
Once UI
A design system for expressive Next.js products, with tokens and ready-made patterns.
Reshaped
An accessible React design system for polished, consistent product interfaces.
ReUI
A curated collection of React interface components and dashboard patterns.
Tremor
React components for analytics dashboards, charts and data-rich products.
Untitled UI
An extensive Figma UI kit and React component system for modern product design.
Base UI
Unstyled, accessible React component primitives for custom product interfaces.
Magic Patterns
Generate and iterate on interface concepts with AI-powered components.
Paper
An infinite design canvas built around modern AI and code workflows.
pen.dev
A code-aware visual design environment for AI-assisted interface work.
Figma
A collaborative interface design tool for designing, prototyping and handing off to developers.
Penpot
An open-source design and prototyping platform built on web standards.
Readymag
A browser-based design tool for websites, portfolios and long reads without layout constraints.
Fontshare
A library of quality typefaces from Indian Type Foundry, free for personal and commercial use.
Framer
A visual website builder for designers with a built-in CMS, hosting and localisation.
Radix Colors
An open-source colour system with accessible scales for light and dark UI.
Relume
An AI site builder that turns a brief into a sitemap, wireframes and a style guide built from a large component library.
Iconify
An icon library and Figma plugin that brings many open-source icon sets into one search.
Lovable
An AI app builder that generates full-stack web apps from conversation.