Apple-aesthetic
UI Components
Semantic CSS classes on Tailwind CSS v4.
No framework, no build step. Write HTML, add Cider UI, and voilà!
npm install ciderui@github:newlix/ciderui
Designed for Simplicity
Every component follows the Apple Human Interface Guidelines — polished, accessible, and consistent out of the box.
Class-light & Semantic
Add .cider to auto-style native HTML elements — inputs, tables, typography — with zero classes.
Framework-agnostic
Pure CSS with zero dependencies. Works with React, Vue, Svelte, HTMX, Rails, Django, or plain HTML.
Light & Dark Mode
Every component adapts automatically. Add class="dark" to your <html> — that's it.
Tailwind CSS v4
Built on Tailwind v4 — use its utilities for layout, spacing, and customization whenever you need control.
Responsive Everything
Components scale gracefully across screen sizes. Combine with Tailwind responsive utilities for full control.
Optional JS (~4 KB)
Interactive components ship as a single lightweight JS bundle. One script tag enables all interactive behavior.
A Taste
A few live components. Toggle dark mode to see them adapt.
Settings
Wi-Fi
Bluetooth
AirDrop
Storage
iCloud+
5 GB of 50 GB used
Profile
Alice Chen
alice@example.com
Notifications 3
Build succeeded
Production deploy completed — 2m ago
New team member
Bob joined the project — 15m ago
New comment
Alice commented on your PR — 1h ago
Less is More
Clean markup that's easy to read and maintain.
<button class="btn-filled">Save</button><button class="inline-flex items-center
justify-center rounded-lg bg-blue-500
px-4 py-2 text-sm font-medium
text-white shadow-sm hover:bg-blue-600
focus-visible:outline-2
focus-visible:outline-offset-2
focus-visible:outline-blue-500
active:scale-[0.98]
disabled:opacity-50
disabled:pointer-events-none">
Save
</button>