haptic-ui

Skeuomorphic design system for React. 47 components with tactile shadows, gradient surfaces, and spring animations.

Built on top of shadcn/ui and Radix UI, with a distinctive tactile aesthetic.

Install

npm install haptic-ui

Setup

Import the styles once in your app root:

import "haptic-ui/styles"

Usage

import { Button, Input, Card, Badge } from "haptic-ui"

function App() {
  return (
    <Card>
      <Input placeholder="Type something..." />
      <Button variant="primary">Click me</Button>
      <Badge variant="success">New</Badge>
    </Card>
  )
}

Components

Form Controls: Button, IconButton, Input, Textarea, Checkbox, Radio, Switch, Slider, Select, Toggle, ToggleGroup

Data Display: Card, Badge, Avatar, Table, Skeleton, Alert

Feedback: Progress, Toast, Tooltip

Navigation: Tabs, Breadcrumb, Pagination, NavigationMenu

Layout: Accordion, ScrollArea, Resizable, Collapsible, Sidebar

Overlays: Dialog, AlertDialog, Sheet, Drawer, Popover, HoverCard

Menus: DropdownMenu, ContextMenu, Menubar

Command: Command, Combobox

Specialized: Calendar, Carousel, Form, Chip, Knob, Stepper, SegmentedControl

Customization

Components use CSS custom properties for theming. Override these in your CSS:

:root {
  --color-haptic-brand: #fb4b00;
  --haptic-shadow-standard: ...;
  --radius-haptic-shell: 1rem;
}

License

MIT