Atelier UI

Search components…

Search components…

中文English

Tune first,then copy.

Curated React + Tailwind CSS components. Preview live, read the source, and install into your project with the shadcn CLI.

Browse components
components
209
components
categories
10
categories
templates
38
templates

Editor's picks

The components we recommend most

View all

Hero Spotlight

Marketing

Landing page hero with a spotlight gradient, grid backdrop and dual CTAs.

Pricing Cards

Marketing

Three-tier pricing cards with a monthly / yearly switch and a highlighted plan.

Testimonial Marquee

Marketing

Two-row testimonial marquee scrolling in opposite directions, paused on hover with faded edges.

Aurora Background

Effects

Slowly drifting aurora gradient background with configurable colors and speed.

Shimmer Button

Buttons

Button with a sweeping shimmer; shine color, background and speed are configurable.

Base Button

Buttons

shadcn-style base button with 6 variants and 4 sizes, built on class-variance-authority.

Animated Tabs

Navigation

Tabs with a sliding active indicator and arrow-key navigation.

AI Chat Input

Application UI

AI chat composer with auto-grow, attachments, model picker and Enter to send.

Spotlight Card

Effects

Card with a spotlight that follows the pointer and a glowing border.

Sign-in Form

Inputs & forms

Sign-in form with social providers, validation, remember me and loading state.

Command Palette

Overlays & feedback

⌘K command palette with fuzzy search, groups, shortcut hints and full keyboard control.

Navbar

Navigation

Responsive navbar with frosted glass on scroll, a mobile menu and a floating pill variant.

Data Table

Application UI

Data table with search, column sorting, row selection, pagination and custom cells.

Browse by category

Ten groups, from landing pages to data displays

Marketing17Heroes, features, pricing, FAQs, CTAs and footers for landing pagesEffects15Backgrounds, gradients, glows and number / text animationsButtons53Textured, animated, base and composite buttonsInputs & forms27Text fields, selects, ratings, date pickers, uploads and auth formsOverlays & feedback24Dialogs, drawers, menus, command palettes, tooltips and toastsNavigation24Navbars, tabs, breadcrumbs, pagination, steppers and docksApplication UI17Data tables, kanban boards, sidebars, timelines and AI chatCards8Blog, product, flip, expandable, glass and testimonial cardsFeedback & status8Alerts, progress, skeletons, spinners, badges and status flowsData display16Charts, accordions, tabs, avatars, code blocks and keycaps

Page templates

Complete pages assembled from components, installed together

View all

SaaS Landing

9 components

A complete SaaS landing page: navbar, hero, logo cloud, feature bento, testimonials, pricing, FAQ, CTA and footer.

Analytics Dashboard

5 components

An admin dashboard with a collapsible sidebar, period-aware stat cards, a revenue chart, an activity feed and a sortable orders table.

AI Chat

2 components

An AI chat app with a conversation sidebar, a message thread and a composer with model switching and attachments, plus simulated replies.

iOS Settings

1 components

Grouped lists, colored icons, switches, Wi-Fi and Display sub-pages with live search.

iOS Home Screen

1 components

App icon grid, widgets, a dock and page dots.

iOS Messages

1 components

Conversation list and thread with bubbles, typing indicator and canned replies.

iOS Music Player

1 components

Album art, scrubber, transport controls and auto-advance.

iOS Clock

1 components

World clock, alarms, stopwatch and timer.

iOS Wallet

1 components

Stacked cards that lift on tap with transaction history.

iOS Maps

1 components

A vector-style map with a three-detent bottom sheet and place card.

iOS App Store Today

1 components

Story cards, full-screen expansion and a Get → progress → Open button.

Tune first, then copy

Adjust props, colors, radius and theme variables right on the component page. The code you copy is exactly what you tuned.

  • Visual prop controls
  • Live theme variables
  • Export the final code
Customize Aurora Background Open the theme editor

Just added

The newest additions to the library

View all

Line Chart

Data display

Responsive multi-series SVG line and area chart with smooth curves, hover crosshair tooltip, legend toggles and draw-in animation.

Gauge

Data display

Semicircular gauge with animated needle or arc fill, colored threshold zones and meter semantics.

Heatmap Calendar

Data display

GitHub-style contribution calendar with five intensity levels, tooltips and roving-tabindex keyboard navigation.

Carousel

Data display

Accessible slide carousel with prev/next, dots, drag and swipe, keyboard arrows, loop and pausable autoplay.

JSON Viewer

Data display

Collapsible JSON tree with syntax colors, key counts, expand/collapse all, copy value or path and long-string expansion.

Diff Viewer

Data display

Side-by-side and unified text diff with line numbers and word-level highlights, stacking to unified on narrow screens.