Shadcn/UI Components Showcase
A comprehensive display of all available components and their variants
Question Flow Components
Survey and assessment question types for psychological instruments. These components power questionnaires and assessments with various response formats.
Interactive Survey Flow
I feel confident in my ability to complete this task.
Rate your agreement with this statement (5-point Likert)
Select an option
Question Type Explorer
Use the dropdown to switch between different question types. Each type uses the ItemType enum.
Which best describes your current employment status?
Categorical/demographic question
Question Progress
Visual progress indicator shown during surveys.
Without count display
ItemType Enum Reference
All question types are defined as an enum for type safety.
export enum ItemType {
MULTIPLE_CHOICE = "MULTIPLE_CHOICE",
LIKERT_SCALE = "LIKERT_SCALE",
TRUE_FALSE = "TRUE_FALSE",
YES_NO = "YES_NO",
FREE_TEXT = "FREE_TEXT",
NUMERIC = "NUMERIC",
SLIDER = "SLIDER",
RANKING = "RANKING",
MATRIX = "MATRIX",
}Color Palette
Design system colors following neuromorphic principles
Background
Chart Colors
Layout Components
Card
This is the card content area.
More card content to demonstrate the layout.
Separator
Horizontal separator:
Form Components
Input
Textarea
Input Group
Input OTP
Select
Checkbox
Radio Group
Switch
Slider
Progress
Data Display Components
Badge
Avatar
Table
| Name | Status | Actions | |
|---|---|---|---|
| John Doe | Active | john@example.com | |
| Jane Smith | Inactive | jane@example.com |
Skeleton
Empty State
Chart Components
Line Chart
Area Chart
Bar Chart
Pie Chart
Radial Chart
Interactive Components
Alert
Accordion
Collapsible
Carousel
Overlay Components
Dialog
Alert Dialog
Sheet
Drawer
Popover
Hover Card
Tooltip
Command Components
Command
Command Dialog
Command Palette
Search for a command to run...
Utility Components
Scroll Area
Resizable
Kbd
Spinner
Item Components
Item
Software Engineer
Manage your preferences