Get Started
Components
- Accordion
- Alert Dialog
- Alert
- Aspect Ratio
- Avatar
- Badge
- Breadcrumb
- Button Group
- Button
- Calendar
- Card
- Carousel
- Chart
- Checkbox
- Collapsible
- Combobox
- Command
- Context Menu
- Data Table
- Date Picker
- Dialog
- Drawer
- Dropdown Menu
- Empty
- Field
- Form
- Hover Card
- Input Group
- Input OTP
- Input
- Item
- Kbd
- Label
- Menubar
- Native Select
- Navigation Menu
- Pagination
- Popover
- Progress
- Radio Group
- Resizable
- Scroll Area
- Select
- Separator
- Sheet
- Sidebar
- Skeleton
- Slider
- Sonner
- Spinner
- Switch
- Table
- Tabs
- Textarea
- Toast
- Toggle Group
- Toggle
- Tooltip
- Typography
Introduction
A React component library with iOS 1-inspired skeuomorphic design. Glossy gradients, brushed metal, and tactile depth.
skeuomorph/ui brings back the tactile, glossy aesthetic of early iOS design to modern React applications.
Design Philosophy
Every component features classic skeuomorphic elements:
- Glossy Gradients - Aqua-blue buttons with white highlight overlays
- Brushed Metal - Chrome and silver textures for secondary elements
- Inset Shadows - Depth that makes buttons feel pressable
- Text Shadows - Embossed and engraved text effects
Getting Started
This library is in early development. Browse the source code to see how components are built, then copy what you need into your project.
import { Button } from "@/components/ui/button"
export function Demo() {
return <Button>Click Me</Button>
}Components
55+ components with consistent skeuomorphic styling:
- Buttons - Glossy aqua, destructive red, chrome outline
- Cards - Raised panels with subtle shadows
- Dialogs - Modal windows with depth
- Forms - Inputs, selects, checkboxes with tactile feedback
- Navigation - Menus, tabs, sidebars
- Data Display - Tables, badges, avatars
Open Code
You get the full source code. Customize colors, gradients, shadows - make it yours.
Components are built on Radix UI primitives for accessibility, with skeuomorphic styling on top.