Shadix

Copy Markdown View Source

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

# 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 for the toolchain and hk for git hooks.

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 dev harness (dev/, storybook/) previews every component.

License

MIT