Patterns

Keyboard-driven command menu powered by cmdk with category grouping.

• ✓⌘K shortcut
• ✓Category groups
• ✓Keyboard navigation

Multi-mode authentication form with login, register, and password reset.

• ✓3 modes
• ✓Social login
• ✓Password visibility toggle

Three-tier learning-track comparison table with a highlighted recommended path.

• ✓Featured tier scale
• ✓Feature checklist
• ✓Badge label

Zero-state placeholder with icon, messaging, and action buttons.

• ✓3 sizes
• ✓Custom icon slot
• ✓Primary + secondary actions

Notification panel with unread count, type icons, and dismiss actions.

• ✓Unread badge
• ✓Mark all read
• ✓Dismiss per item

Profile card with avatar, bio, stats, social links, and follow button.

• ✓Cover image
• ✓Avatar initials
• ✓Stats grid

3-step wizard form with progress indicator and step validation.

• ✓Step progress bar
• ✓Back/Next navigation
• ✓Final review step

Animated toggle switch for light/dark mode with size variants.

• ✓Animated knob
• ✓Sun/Moon icon
• ✓Three sizes

⌘K command palette search modal with categories, keyboard navigation, and results.

• ✓⌘K shortcut
• ✓Keyboard navigation
• ✓Category groups

GDPR-style cookie consent banner with Accept/Decline and dismiss state.

• ✓Accept/Decline actions
• ✓Dismissed state
• ✓Top or bottom position

Floating feedback button that opens a popover with star rating and comment textarea.

• ✓Star rating
• ✓Comment textarea
• ✓Thank-you state

HTML5 audio player with progress bar, play/pause/seek, and volume control.

• ✓Play/Pause/Seek
• ✓Volume control
• ✓Cover art

Tabbed settings panel with sidebar navigation — Appearance, Notifications, and more.

• ✓Sidebar navigation
• ✓Theme selector
• ✓Language picker

Step-by-step onboarding tour with progress dots, skip button, and animated transitions.

• ✓Progress dots
• ✓Skip/Back/Next
• ✓Completion state

Data table with checkbox selection and a bulk-action bar for Export, Archive, and Delete.

• ✓Select all / partial
• ✓Bulk actions
• ✓Status badges