skeu

Skeuomorphic / Aqua-flavored React component library — glossy bezels, candy gradients, pill radii. 23 components, multiple themes, no runtime styling deps.

Install

npm install skeu
# peer deps
npm install react react-dom lucide-react tailwindcss

Usage

import { Panel, Button, Input } from "skeu";
import "skeu/styles.css";

export function App() {
  return (
    <Panel title="Hello">
      <Input placeholder="Type something" />
      <Button variant="primary">Submit</Button>
    </Panel>
  );
}

The shipped skeu/styles.css is pre-compiled — drop it into any project and the components render correctly.

If you're already on Tailwind v4 and want the skeu design tokens (colors, fonts, radii, shadows) available as utilities (bg-accent, text-text-primary, shadow-control, etc.), import the source styles instead of the compiled bundle and let your Tailwind build pick up the @theme aliases:

/* your-app.css */
@import "tailwindcss";
@import "skeu/styles.css";

Themes

Set data-theme on any ancestor element to switch palettes:

<div data-theme="grassy">
  <Panel>…</Panel>
</div>

Built-in themes: white (default), grassy, graphite, linen, blueprint.

Components

Badge, Breadcrumb, Button, Checkbox, Divider, Frame, Input, LineChart, List, ListItem, Modal, NumberInput, Pagination, Panel, ProgressBar, Radio, SegmentedControl, Select, Slider, Spinner, Tabs, TextArea, Toggle, Tooltip.

Development

bun install
bun run dev     # playground (src/App.tsx)
bun run build   # library build → dist/

License

MIT