# Cider UI

> Apple-aesthetic UI components as a Tailwind CSS v4 plugin. Semantic class names, no utility soup. Pure CSS with optional vanilla JS for interactive components. No framework required.

## Getting Started

- [Home](https://ciderui.com/index.html): Overview of Cider UI — semantic classes, dark mode, ~12 KB CSS + ~5 KB JS gzipped.
- [Installation](https://ciderui.com/installation.html): CDN, npm/pnpm/bun/yarn, ES module imports, dark mode setup.

## Components

### Form & Input

- [Button](https://ciderui.com/components/button.html): `btn-filled` `btn-tinted` `btn-plain` `btn-gray` `btn-destructive` `btn-capsule` `btn-small` `btn-large`.
- [Checkbox](https://ciderui.com/components/checkbox.html): `input[type="checkbox"]` — pure CSS checkbox styling.
- [Text Field](https://ciderui.com/components/text-field.html): `input` — styled text input.
- [Search Field](https://ciderui.com/components/search-field.html): `search-field` `search-clear` — rounded search input with magnifying glass icon.
- [Verification Code](https://ciderui.com/components/verification-code.html): Verification code input with auto-advance. Requires JS.
- [Radio Group](https://ciderui.com/components/radio-group.html): `input[type="radio"]` — pure CSS radio styling.
- [Select](https://ciderui.com/components/select.html): Native `<select>` styling.
- [Slider](https://ciderui.com/components/slider.html): `slider` — styled range input.
- [Stepper](https://ciderui.com/components/stepper.html): `stepper` — increment/decrement control. Requires JS.
- [Switch](https://ciderui.com/components/switch.html): `input[role="switch"]` — pure CSS toggle switch.
- [Textarea](https://ciderui.com/components/textarea.html): `textarea` — styled textarea.
- [Token Field](https://ciderui.com/components/token-field.html): `token-field` `token` `token-blue` — text input with removable tokens. Requires JS.

### Layout

- [Essentials](https://ciderui.com/components/essentials.html): `.cider` — auto-style native HTML elements (buttons, inputs, tables, typography). No layout opinion, pure styling hook. Add `.cider-fixed` alongside `.cider` for centered responsive max-width breakpoints.

### Navigation

- [Breadcrumb](https://ciderui.com/components/breadcrumb.html): `breadcrumb` — breadcrumb navigation with separator arrows.
- [Card](https://ciderui.com/components/card.html): `card` — simple padded container.
- [Navigation Bar](https://ciderui.com/components/navbar.html): `navbar` — iOS-style top navigation bar. Grid 1fr/auto/1fr: 1st = left slot, 2nd = title, 3rd = right slot (structural, no extra classes).
- [Page Control](https://ciderui.com/components/page-control.html): `page-control` — Apple-style dot page indicator.
- [Pagination](https://ciderui.com/components/pagination.html): `pagination` — page navigation buttons.
- [Separator](https://ciderui.com/components/separator.html): Classless `<hr>` for horizontal dividers; `.separator-vertical`, `.separator-label` for variants.
- [Segmented Control](https://ciderui.com/components/segmented-control.html): `segmented-control` — tabbed segment selector. Requires JS.
- [Sidebar](https://ciderui.com/components/sidebar.html): `sidebar` — macOS-style sidebar navigation with section headers and compact link items. Requires JS for mobile toggle.
- [Tab Bar](https://ciderui.com/components/tab-bar.html): `tab-bar` — iOS-style bottom navigation with icon and label items.
- [Tabs](https://ciderui.com/components/tabs.html): `[data-tabs]` `[data-tab-list]` `[data-tab]` `[data-tab-panel]` — tab group with ARIA roles, keyboard navigation, and optional sliding indicator. Requires JS.
- [Toolbar](https://ciderui.com/components/toolbar.html): `toolbar` `toolbar-group` `toolbar-spacer` `toolbar-title` — macOS-style grouped action bar.

### Overlays & Dialogs

- [Action Sheet](https://ciderui.com/components/action-sheet.html): `action-sheet` `action-sheet-group` — iOS-style bottom sheet for contextual actions. Requires JS.
- [Dialog](https://ciderui.com/components/dialog.html): `dialog` with `header`, `section`, `footer`. Alerts and form dialogs. Optional JS.
- [Popover](https://ciderui.com/components/popover.html): Click-triggered floating content. Requires JS.

### Feedback & Status

- [Activity Indicator](https://ciderui.com/components/activity-indicator.html): `activity-indicator` `activity-indicator-sm` `activity-indicator-md` `activity-indicator-lg` — Apple-style loading indicator.
- [Badge](https://ciderui.com/components/badge.html): `badge` — red notification count.
- [Callout](https://ciderui.com/components/callout.html): `callout` — informational callout box.
- [Gauge](https://ciderui.com/components/gauge.html): `gauge` `gauge-sm` `gauge-lg` `gauge-green` `gauge-orange` `gauge-destructive` — circular ring progress indicator.
- [Tooltip](https://ciderui.com/components/tooltip.html): `[data-tooltip]` — hover tooltip on any element. Pure CSS, no JS.
- [HUD](https://ciderui.com/components/hud.html): `hud` `hud-container`. Requires JS.
- [Progress](https://ciderui.com/components/progress.html): `<progress>` `.progress-indeterminate`

### Display & Media

- [Avatar](https://ciderui.com/components/avatar.html): `avatar` `avatar-sm` `avatar-lg` `avatar-xl` `avatar-group` — use Tailwind `size-*` and `text-*` for custom sizes.
- [Kbd](https://ciderui.com/components/kbd.html): `kbd` — keyboard shortcut styling with macOS, Windows, and Linux shortcut examples.
- [Disclosure Group](https://ciderui.com/components/disclosure-group.html): `disclosure-group` — collapsible accordion sections using native `<details>/<summary>`.
- [List](https://ciderui.com/components/list.html): List with auto-styled rows. `list` — children get icon, content, action styling via structural selectors.
- [Table](https://ciderui.com/components/table.html): `table` `table-striped` — styled tables.
- [Picker](https://ciderui.com/components/picker.html): `picker` `picker-column` — iOS-style scroll wheel picker. Requires JS.
- [Tag](https://ciderui.com/components/tag.html): `tag` — small label for categorisation.

## Quick Start

```css
@import "tailwindcss";
@import "ciderui";
```

All styles require a `.cider` ancestor — both classless elements and component classes are inside `@scope(.cider)`.

```html
<body class="cider">
  <h1>Auto-styled heading</h1>
  <button class="btn-filled">Click me</button>
</body>
```

## Dark Mode

Add `class="dark"` to `<html>`. All components adapt automatically via CSS variables.

## Interactive Components (Optional)

Most components are pure CSS. Import JS only for interactive behavior:

```js
import "ciderui/cider.js";
```