ui-preview

Preview Yumma UI components in isolation at 100% viewport. Browse, navigate, and screenshot 333+ registry components with keyboard shortcuts.

Built with Next.js, Yumma CSS, Base UI, Iconoir, and Motion.

Quick Start

pnpm install
pnpm dev
# or: pnpm exec yummacss build && pnpm build

Open http://localhost:3000.

Keyboard Shortcuts

Available on any component preview page (/preview/<id>):

Shortcut	Action
← / →	Previous / Next component
⌘← / ⌘→	Previous / Next in same family (e.g. all button variants)
⇧← / ⇧→	First / Last in current family
⎋	Go to home page
?	Toggle help dialog
g g	Go to home page (Vim-style sequence)

Press the ? button in the top-left corner of any demo page to view shortcuts.

Syncing Components

Components are copied from the Yumma CSS docs registry. To update:

pnpm sync
pnpm exec yummacss build && pnpm build

Tech Stack

• Next.js 16 (App Router)
• Yumma CSS (utility CSS framework)
• Base UI (headless React components)
• Iconoir (open-source icons)
• Motion (animations)
• TanStack Hotkeys (keyboard shortcuts)
• Biome (linting/formatting)