question.design

Design System AI & Design Vibe Coding Design Process

Getting Started

Introduction Theme Generator

Components

44

Accordion Alert Alert Dialog Aspect Ratio Avatar Badge Breadcrumb Button Calendar Card Carousel Checkbox Collapsible Command Context Menu Dialog Drawer Dropdown Menu Form Hover Card Input Input OTP Label Menubar Navigation Menu Pagination Popover Progress Radio Group Resizable Scroll Area Select Separator Sheet Skeleton Slider Sonner Switch Table Tabs Textarea Toggle Toggle Group Tooltip

Modern Components

16

AI Chat Bento Grid Gradient Text Animated Counter Spotlight Card Typing Animation File Upload Stepper Code Block Marquee Shimmer Button Blur Fade Timeline Dock Animated List Ripple

AI Components

8

AI Chat AI Prompt Input AI Message Bubble AI Suggestion Cards AI Model Selector AI Code Block AI Conversation List AI Markdown Renderer

Blocks

16

Hero Section Features Grid Pricing Section Testimonials CTA Section Stats Section Footer FAQ Section Team Section Logo Cloud Comparison Table Newsletter Section Login Page Error Page Dashboard Layout Dashboard (Density)

Badge

shadcn/ui

Displays a badge or a component that looks like a badge.

DefaultSecondaryOutlineDestructive

Theme Generator

Mode

Theme Presets

Font:Geist|Geist Mono

Brand

Primary#171717

Primary Foreground#fafafa

Secondary#f5f5f5

Secondary Foreground#171717

Accent#f5f5f5

Accent Foreground#171717

Destructive#e7000b

Surfaces

Background#ffffff

Foreground#0a0a0a

Card#ffffff

Card Foreground#0a0a0a

Popover#ffffff

Popover Foreground#0a0a0a

Muted#f5f5f5

Muted Foreground#737373

Utility

Border#e5e5e5

Input#e5e5e5

Ring#a1a1a1