scene-ui components
May 9, 2025 · 5 min read
This library presents a carefully curated collection of shadcn/ui components, reimagined with a retro computer interface aesthetic. Each component combines modern accessibility standards with a distinctive visual style inspired by vintage GUI design.
This component collection was inspired by game hacking/modding/utility UIs, which blend simplicity and elegance in an old-fashioned manner.
#Colors
Color System
Primary
--primarySecondary
--secondaryAccent
--accentDestructive
--destructiveMuted
--mutedCard
--cardGUI Accent
--gui-accent#Core Components
#Button
The foundational interactive element. Available in multiple variants and sizes for different contexts.
Variants: default, outline, secondary, ghost, destructive, link
Sizes: xs, sm, default, lg, icon-xs, icon-sm, icon-lg, icon
Button Component
Variants
Sizes
States
#Input & Textarea
Text input components with consistent styling and validation states.
Input Components
#Badge
Compact labels for categorization and status indication.
Variants: default, secondary, destructive, outline, ghost, link
Badge Component
Variants
Use Cases
#Card
Container component for grouping related content with optional header, footer, and action areas.
Sizes: default, sm
Card Component
#Tabs
Organize content into switchable panels with optional line or default styling.
Variants: default, line
Tabs Component
Default Variant
#Dialog
Modal dialog component for focused user interactions with customizable content and actions.
Dialog Component
#Checkbox
Accessible checkbox input with focus states and validation support.
Checkbox Component
#Alert
Informational banner component for alerts, errors, and status messages.
Variants: default, destructive
Alert Component
#GUI Window
A specialized wrapper component that provides a retro window aesthetic with optional dragging, animation, and custom title bars.
Props:
drag: Enable dragging functionalityanimation: Enable height animation on content changesbar: Custom window bar content ortruefor default barclassName: Additional CSS classes
GUI Window Component
The GUI Window component provides a retro-styled container with optional dragging, animation, and custom window bars. It features a distinctive border style and supports height animation when content changes.
• Smooth height animations for dynamic content
• Optional drag-to-move functionality
• Customizable window bar with title and controls
• Perfect for showcasing dialog-like content
#Alert Dialog
Modal dialog specifically designed for critical confirmations and alerts. Demands user attention with mandatory action choice.
Alert Dialog Component
#Radio Group
Single-selection component for mutually exclusive options. Users can select one option from a group.
Radio Group Component
Selected: option1
#Switch
Binary toggle control for enabling/disabling features or toggling between two states.
Switch Component
#Slider
Range or value selection control for numeric input with optional range selection.
Slider Component
Volume: 50%
#Avatar
User profile image component with fallback text when image fails to load.
Sizes: sm (24px), default (32px), lg (40px)
Avatar Component
Small
24px
Default
32px
Large
40px
#Tooltip
Contextual information displayed on hover or focus with customizable positioning.
Tooltip Component
#Select
Dropdown select component for choosing from a list of options with keyboard support.
Select Component
Selected: option1
#Accordion
Expandable/collapsible content sections with only one section open at a time.
Accordion Component
#Popover
Floating content box that appears relative to a trigger element.
Popover Component
#Drawer
Side panel that slides in from the edge of the screen, ideal for navigation or secondary content.
Drawer Component
#Toggle Group
Group of toggle buttons for selecting one or multiple options.
Toggle Group Component
Selected: left
#Progress
Visual indicator of task completion or progress through a process.
Progress Component
25% Complete
50% Complete
100% Complete
#Pagination
Navigation component for moving between pages of content.
Pagination Component
#Skeleton
Loading placeholder that matches the shape of content being loaded.
Skeleton Component
#Collapsible
Simple show/hide component for toggling content visibility.
Collapsible Component
#Table
Data display component for presenting tabular information.
Table Component
| Name | Status | Amount |
|---|---|---|
| Item One | Active | $100 |
| Item Two | Pending | $250 |
| Item Three | Inactive | $75 |
#Calendar
Date picker component for selecting dates from a visual calendar.
Calendar Component
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Selected: 6/12/2026
#Spinner
Animated loading indicator for async operations.
Spinner Component
#Scroll Area
Custom scrollbar component for better control and styling of scrollable content.
Scroll Area Component
#Breadcrumb
Navigation trail for showing the current location within a hierarchy.
Breadcrumb Component
#Dropdown Menu
Contextual menu for actions and settings.
Dropdown Menu Component
#Hover Card
Preview card that appears on hover for lightweight contextual information.
Hover Card Component
#Input Group
Composite input with inline controls and adornments.
Input Group Component
#Kbd
Keyboard shortcut styling for showing key combinations.
Kbd Component
#Label
Accessible label component tied to form controls.
Label Component
#Native Select
Browser-native select element wrapped in the site's retro styling.
Native Select Component
#Sheet
Sliding side panel for secondary content and settings.
Sheet Component
#Menu Link
Navigation link styled for sidebar or menu use.
Menu Link Component
#Button Group
Grouped buttons that visually belong together.