Beautiful components for modern interfaces.
Production-ready React components, polished examples, and installable patterns for building faster with confidence.
Preview
Dashboard
Components
Blocks
Templates
Motion
Ready
Data
Ready
Forms
Ready
example.ts
1export function greet(name: string) {2 return `Hello, ${name}!`;3}
File Tree
src
app
layout.tsx
page.tsx
globals.css
api
auth
route.ts
users
route.ts
components
ui
button.tsx
card.tsx
file-tree.tsx
header.tsx
footer.tsx
lib
utils.ts
constants.ts
hooks
use-auth.ts
use-theme.ts
public
favicon.ico
logo.svg
images
hero.png
avatar.jpg
package.json
tsconfig.json
next.config.mjs
tailwind.config.ts
.env.local
.gitignore
README.md
Command Menu
Search anything...⌘ K
Dashboard
Analytics
Customers
Orders
Settings
File Tree
Display and navigate hierarchical data with expandable nodes.
src
app
layout.tsx
page.tsx
globals.css
api
auth
route.ts
users
route.ts
components
ui
button.tsx
card.tsx
file-tree.tsx
header.tsx
footer.tsx
lib
utils.ts
constants.ts
hooks
use-auth.ts
use-theme.ts
public
favicon.ico
logo.svg
images
hero.png
avatar.jpg
package.json
tsconfig.json
next.config.mjs
tailwind.config.ts
.env.local
.gitignore
README.md
New this month
FAQ Dial
A radial FAQ navigator for dense help content and guided product education.
Pro
FAQ
Select a marker around the dial
Electric Border Card
A card with an electric border effect.
Hover to energize
Electric border card
arcColor tints the lightning; accentColor tints the hover shadow and glow.
Button collection
Buttons
A sampler of expressive button styles and interactions.
Ripple
Shimmer
Tactile
Terminal
Theme Preview
Preview interface components across light and dark themes.
Code Block
Syntax-highlighted code blocks with copy and file tabs.
example.ts
1export function greet(name: string) {2 return `Hello, ${name}!`;3}