Command Palette

Search for a command to run...

Components

Every primitive available in this template — buttons, sheets, dialogs, forms, tables — plus a curated set of composed patterns inspired by Origin UI. Use it as a kitchen-sink reference when building new pages.

Buttons & Badges

Variants, sizes, icons, loading states, and badge styles.

Variants

Sizes

With icons

States

Badges

DefaultSecondaryOutlineDestructivePillSuccessPending

Inputs, selects & toggles

Text fields, password, search, date, slider, switches.

Toggles

Dialogs & Sheets

Dialog, sheet (4 sides), drawer, alert dialog, popover, dropdown, tooltip, hover card, command palette, sonner toasts, multi-step wizard.

Dialogs

Command Palette

Search for a command to run...

Sheets — all sides

Drawer (mobile-friendly bottom sheet)

Dropdown / Popover / Tooltip / Hover card

Toasts (Sonner)

Data display

Cards, tables, accordion, tabs, alerts, avatars, skeletons.

Total revenue
$45,231.89
+20.1%from last month
Active users
2,350
+180since yesterday
Subscriptions
+12,234
−4.3%vs last week

Table

OrderCustomerAmountStatusDate
ORD-1041
AHAli Hasanli
$248.00PaidMar 14
ORD-1042
SASevinc Aliyeva
$1,420.00PendingMar 14
ORD-1043
RMRauf Mammadov
$92.50RefundedMar 13
ORD-1044
LQLeyla Quliyeva
$615.00PaidMar 13
ORD-1045
TBTural Babayev
$310.75CancelledMar 12

Tabs

High-level metrics and a brief summary of the project state.

Accordion

Yes. It adheres to the WAI-ARIA design pattern.

Alerts

Skeleton (loading)

Form (react-hook-form + zod)

Validation, error states, controlled select and checkbox.

Origin UI

Composed patterns from originui.com — password strength, tag input, combobox, multi-select, stepper, rating, OTP, billing toggle.

  • 8+ characters
  • Number
  • Symbol
  • Upper & lower

Format: +<country> <number>. We'll auto-format and validate as you type.

designfrontendui

Misc

4/5

Enter the 6-digit code from your authenticator app.