Local reference · /shadcn

Component gallery

Every component in src/components/ui rendered with live, interactive demos. Built from preset b3Y8ryeGJ6 (Sera · Stone · Blue · Inter · Geist heading · Remixicon).

b3Y8ryeGJ6serablueremixicon

Style: sera
Base color: stone
Theme: blue
Chart color: stone
Heading font: geist
Body font: inter
Icon library: remixicon
Radius: medium

npx shadcn@latest apply --preset b3Y8ryeGJ6 -y
npx shadcn@latest add --all -y -o

Open preset Back home

Accordion

Base UI accordion, multiple items expanded by default.

Frameline is a Next.js app styled with the Sera shadcn preset, Base UI primitives, and Remix icons.

Alert

Default and destructive variants, with an inline action.

Deployment scheduled

Your changes will go live within the next 10 minutes.

Payment failed

We couldn't charge your card. Update your billing details.

Alert Dialog

Blocking confirmation for a destructive action.

Aspect Ratio

Constrains child content to a fixed ratio.

16 / 9

Attachment

File attachments in idle, done, and error states.

brand-assets.zip4.2 MB

cover-photo.pngUploading…

proposal.pdfUpload failed

Avatar

Single avatar with badge, plus a stacked group.

ABCDEF

Badge

All variants.

DefaultSecondaryOutlineDestructiveGhostLink

Bubble

Chat bubble content variants.

Default bubble

Secondary bubble

Muted bubble

Outline bubble

Button

Variants and sizes.

Button Group

Segmented actions and a text/input pairing.

Calendar

Single-date selection with controlled state.

August 2026

Card

Header, content, footer composition.

Team plan

For growing product teams.

Popular

Unlimited projects, shared workspaces, and priority support.

Carousel

Embla-powered carousel with previous/next controls.

Chart

Recharts area chart wired through ChartContainer.

Checkbox

Standalone checkbox with label.

Accept terms and conditions

Collapsible

Toggleable content region.

Combobox

Filterable input with popup list.

Command

Command palette rendered inside a dialog.

Dialog

Modal dialog with header, footer, and close button.

Direction

Scopes Base UI positioning logic to RTL for a subtree.

هذه اللوحة تستخدم DirectionProvider لعكس اتجاه القراءة.

Drawer

Bottom sheet with swipe-to-dismiss.

Empty

Empty state placeholder with icon and action.

No messages yet

When you receive a message, it will show up here.

Field

Form field composition, including a toggle row.

Account

Email notifications

Receive updates about your account.

Input

Text input, including a disabled state.

Input Group

Input with leading icon and trailing action.

Input OTP

Six-digit one-time passcode input.

[data-input-otp] { --nojs-bg: white !important; --nojs-fg: black !important; background-color: var(--nojs-bg) !important; color: var(--nojs-fg) !important; caret-color: var(--nojs-fg) !important; letter-spacing: .25em !important; text-align: center !important; border: 1px solid var(--nojs-fg) !important; border-radius: 4px !important; width: 100% !important; } @media (prefers-color-scheme: dark) { [data-input-otp] { --nojs-bg: black !important; --nojs-fg: white !important; } }

Item

List rows with media, content, and actions.

Team workspace

Shared across 6 members.

Preferences

Manage notifications and theme.

Kbd

Keyboard shortcut hints.

K

Press Ctrl to submit.

Label

Paired with a control.

Display name

Marker

Section markers used to label groups of content.

Default marker

Separator marker

Border marker

Menubar

Desktop-style application menu.

Message

Chat thread built from Message, Bubble, and Avatar.

Hey! How can I help today?

9:41 AM

Can you summarize the shadcn component gallery?

9:42 AM

Message Scroller

Auto-scrolling viewport with a jump-to-latest button.

Message number 1

Message number 2

Message number 3

Message number 4

Message number 5

Message number 6

Message number 7

Message number 8

Native Select

Styled wrapper around the native <select>.

Pagination

Interactive page controls.

Progress

Determinate progress with a live label and value.

Uploading

Radio Group

Single-select plan picker.

Free

Pro

Team

Resizable

Draggable panel group.

Panel one

Panel two

Scroll Area

Custom scrollbar over overflowing content.

Row 1

Row 2

Row 3

Row 4

Row 5

Row 6

Row 7

Row 8

Row 9

Row 10

Row 11

Row 12

Row 13

Row 14

Row 15

Row 16

Row 17

Row 18

Row 19

Row 20

Select

Popup select list.

Separator

Horizontal and vertical dividers.

Frameline

Design systems platform

Blog

Docs

Source

Sheet

Side panel, opening from the right.

Skeleton

Loading placeholders.

Slider

Single-thumb and range variants.

Spinner

Loading indicator sizes.

Switch

Boolean toggles with labels.

Airplane mode

Wi-Fi

Table

Tabular data with header, body, and caption.

Recent invoices.
Invoice	Status	Method	Amount
INV001	Paid	Credit card	$250.00
INV002	Pending	PayPal	$150.00
INV003	Unpaid	Bank transfer	$350.00

Tabs

Panels switched by tab triggers.

Textarea

Multi-line text input.

Bio

Toast

Transient notifications via the toast manager.

Toggle

Single pressed/unpressed control.

Toggle Group

Multiple selection formatting controls.

Files: src/app/shadcn/preset.json, src/app/shadcn/theme.css, src/app/shadcn/gallery.tsx