Installation
Add the registry, import the foundation, start adding components.
1. Add the registry
Quire UI works with the shadcn CLI. In a project without a components.json, run npx shadcn@latest init first. Then add the namespace:
{
"registries": {
"@quireui": "https://quireui.dev/r/{name}.json"
}
}2. Add the foundation
npx shadcn@latest add @quireui/foundation @quireui/input-modalityImport the foundation after Tailwind:
@import "tailwindcss";
@import "../styles/quireui.css";Render <InputModality /> once in your root layout. It lets every animation skip itself while someone is using the keyboard.
import { InputModality } from "@/lib/input-modality";
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<InputModality />
{children}
</body>
</html>
);
}3. Add components
npx shadcn@latest add @quireui/button @quireui/dialog @quireui/commandPro
Pro components install from a separate, authenticated registry. After purchase, copy your token from the dashboard:
{
"registries": {
"@quireui": "https://quireui.dev/r/{name}.json",
"@quireui-pro": {
"url": "https://quireui.dev/api/registry/{name}",
"headers": { "Authorization": "Bearer ${QUIREUI_TOKEN}" }
}
}
}