Configure Preskok UI without a framework preset.
Components are styled with Tailwind CSS. Install Tailwind CSS in your project before adding Preskok UI.
Follow the Tailwind CSS installation instructions to get started.
Configure the @ path alias in your tsconfig.json file.
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
}
}components.jsonCreate a components.json file in the root of your project.
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "aria-nova",
"rsc": false,
"tsx": true,
"tailwind": {
"config": "",
"css": "src/styles/globals.css",
"baseColor": "neutral",
"cssVariables": true,
"prefix": ""
},
"aliases": {
"components": "@/components",
"utils": "@/lib/utils",
"ui": "@/components/ui",
"lib": "@/lib",
"hooks": "@/hooks"
},
"registries": {
"@preskok": "https://ui-three-mu.vercel.app/r/{name}.json"
},
"iconLibrary": "lucide"
}aria-nova tells shadcn that Preskok components use React Aria primitives. The local @preskok registry namespace keeps the project configuration self-contained and enables registry discovery through the shadcn MCP server.
You can now add Preskok components to your project.
npx shadcn@latest add @preskok/buttonThe command above will add the Button component to src/components/ui/preskok-ui/button.tsx. You can then import it like this:
import { Button } from "@/components/ui/preskok-ui/button"
export function App() {
return <Button>Click me</Button>
}