Installation
Axie supports two install paths. Use the package when you want a normal dependency. Use the registry when you want shadcn-style source copied into your app.
Choose a path
Do not use both paths by default. Pick the one that matches how much ownership you want over the component source.
Install axie-ui
Best when you want updates through npm and package imports from one stable API.
Copy source with shadcn
Best when you want the component files inside your app and plan to customize them.
Package install
This installs Axie as a dependency. Components stay in node_modules and you import them from axie-ui. Point Tailwind at the package output so Axie utility classes are included.
pnpm add axie-uinpm install axie-uiyarn add axie-uibun add axie-ui@import "tailwindcss";@import "axie-ui/styles.css";@source "../node_modules/axie-ui/dist";import { Button, Field, Input } from "axie-ui";Registry install
This does not install axie-ui. shadcn can add Axie from a URL today, even before Axie is listed in the official shadcn registry.
Recommended: use the direct URL
Use this when you want to install one component without setting up a shorthand namespace.
pnpm dlx shadcn@latest add https://axie.alexi.life/r/button.jsonOptional: add the namespace once
Do this only if you want shorthand commands like @axie/button in that project.
pnpm dlx shadcn@latest registry add @axie=https://axie.alexi.life/r/{name}.jsonpnpm dlx shadcn@latest add @axie/buttonImport copied source
Registry components are local files, so imports point at your app, not axie-ui.
import "@/styles/axie.css";import { Button } from "@/components/axie/button";Styles
Either path needs Axie styles in your global CSS. Package installs import from axie-ui. Registry installs import the copied stylesheet.
/* Package install */@import "tailwindcss";@import "axie-ui/styles.css";@source "../node_modules/axie-ui/dist";/* Registry install */@import "tailwindcss";@import "@/styles/axie.css";