# Shadix

shadcn-style, copy-paste UI components for **Phoenix LiveView**.

Shadix is a distribution model, not a runtime dependency: a Mix generator copies
component *source* into your project, where you own and freely edit it — styled
with Tailwind CSS v4, behavior built on `Phoenix.LiveView.JS` + TypeScript hooks.

> **Status: early development.** The component foundation, 16 presentational
> components, and the **generator** (`mix shadix.add` / `mix shadix.init`) exist and
> are tested. The storybook preview harness and the JavaScript-driven interactive
> components are still in progress — see the checklist below.

## Usage

```sh
# One-time: install the theme CSS + the cn helper, and print Tailwind wiring
mix shadix.init

# Copy a component (and its dependencies) into your app, with the module
# namespace rewritten to your app (defaults to <YourApp>Web.Components.UI):
mix shadix.add button
mix shadix.add card dialog        # multiple at once
mix shadix.add button --namespace MyAppWeb.UI --dir lib/my_app_web/ui
```

Files are copied into your project — you own and edit them. Re-running won't
overwrite your edits unless you pass `--force`.

## How it works

- Components are `Phoenix.Component` function components carrying stable
  `data-slot` attributes (mirroring shadcn) for styling/targeting.
- Class composition uses a tiny `cn/1` helper; conflict resolution is delegated to
  **Tailwind v4 cascade layers**, so a caller's class always wins over a default
  (no `tailwind-merge` needed).
- Theme tokens (shadcn `new-york-v4`) live in `priv/templates/theme.css`.

## Components

### Foundation
- [x] `cn/1` class helper
- [x] Theme tokens (CSS variables + cascade layers)

### Presentational (no JavaScript)
- [x] Button
- [x] Input
- [x] Label
- [x] Textarea
- [x] Card
- [x] Badge
- [x] Alert
- [x] Separator
- [x] Table
- [x] Avatar
- [x] Skeleton
- [x] Aspect Ratio
- [x] Breadcrumb
- [x] Progress
- [x] Pagination
- [x] Kbd
- [x] Empty / Placeholder

### Form controls
- [x] Checkbox
- [x] Radio Group
- [x] Switch
- [x] Slider
- [x] Toggle
- [x] Toggle Group
- [x] Input OTP
- [ ] Form helpers

### Interactive (TypeScript hooks + Floating UI)
- [x] Dialog
- [x] Alert Dialog
- [x] Sheet
- [x] Drawer
- [x] Popover
- [x] Dropdown Menu
- [x] Context Menu
- [x] Menubar
- [x] Navigation Menu
- [x] Tooltip
- [x] Hover Card
- [x] Select
- [x] Combobox
- [x] Command
- [x] Tabs
- [x] Accordion
- [x] Collapsible
- [x] Scroll Area
- [x] Resizable
- [x] Carousel
- [x] Sonner (toast)
- [x] Data Table
- [x] Sidebar

> Chart is intentionally out of scope (no Recharts equivalent for LiveView; revisit
> separately if needed).

## Development

This repo uses [mise](https://mise.jdx.dev) for the toolchain and
[hk](https://hk.jdx.dev) for git hooks.

```sh
mise run setup        # install tools, fetch deps, wire git hooks
mix test              # run the test suite
mix tailwind storybook  # build the storybook CSS (first run: mix tailwind.install)
mix dev               # boot the storybook at http://localhost:4001
```

Components are developed as real modules under `lib/shadix/components/`; the same
modules are what the generator copies (with namespace rewriting) into a host app.
Tailwind classes are lifted verbatim from the vendored shadcn source. A
[phoenix_storybook](https://hex.pm/packages/phoenix_storybook) dev harness
(`dev/`, `storybook/`) previews every component.

## License

MIT