Apple-aesthetic UI components as a Tailwind CSS v4 plugin. Semantic class names like btn, card, input — no utility soup in your markup.
Docs & demos: ciderui.com · Changelog: CHANGELOG.md
Pin a released tag to get a stable version:
pnpm add ciderui@github:newlix/ciderui#v0.5.1
# or: npm install ciderui@github:newlix/ciderui#v0.5.1Omitting the tag tracks main and can break between commits:
pnpm add ciderui@github:newlix/ciderui # ⚠ unstableCopy-paste-ready integration examples in examples/:
examples/vanilla-html— open in browser, no build step (CDN)examples/vite— Vite + Tailwind v4 + tree-shakeable importsexamples/nextjs— Next.js 15 App Router, SSR-safe CSS
@import "tailwindcss";
@import "ciderui";Add .cider to an ancestor element to activate styles:
<body class="cider">
<h1>Auto-styled heading</h1>
<button class="btn-filled">Click me</button>
<div class="card">
<h2>Title</h2>
<p>Content goes here.</p>
</div>
</body>Some components (dialog, popover, tabs, etc.) need JS. Include the full bundle:
import "ciderui/cider.js";Or import only what you need (tree-shakeable):
import "ciderui/components/dialog";
import "ciderui/components/popover";Or via CDN:
<script src="https://cdn.jsdelivr.net/gh/newlix/ciderui@main/js/cider.js"></script>TypeScript types are shipped alongside — window.CiderUI.* and the global
helpers (openDialog, showHUD, etc.) are fully typed.
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/newlix/ciderui@main/dist/ciderui.cdn.min.css"
/>document.documentElement.classList.toggle("dark");- Actions — button, action-sheet, dialog, toolbar, hud, tooltip
- Input — text-field, textarea, search-field, select, checkbox, radio-group, switch, slider, stepper, token-field, verification-code
- Display — card, list, table, badge, avatar, tag, kbd, callout, progress, activity-indicator, gauge, separator
- Navigation — navbar, sidebar, tabs, tab-bar, breadcrumb, pagination, page-control, segmented-control
- Overlay — popover, picker, disclosure-group
See ciderui.com for live examples and markup.
See CONTRIBUTING.md for the dev workflow.