# Manual Installation (/installation/manual)



<Steps>
  ### Add Tailwind CSS [#add-tailwind-css]

  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.](https://tailwindcss.com/installation)

  ### Configure path aliases [#configure-path-aliases]

  Configure the `@` path alias in your `tsconfig.json` file.

  ```json {3-6} title="tsconfig.json" showLineNumbers
  {
    "compilerOptions": {
      "baseUrl": ".",
      "paths": {
        "@/*": ["./src/*"]
      }
    }
  }
  ```

  ### Create `components.json` [#create-componentsjson]

  Create a `components.json` file in the root of your project.

  ```json title="components.json" showLineNumbers
  {
    "$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.

  ### Add components [#add-components]

  You can now add Preskok components to your project.

  ```bash
  npx shadcn@latest add @preskok/button
  ```

  The command above will add the `Button` component to `src/components/ui/preskok-ui/button.tsx`. You can then import it like this:

  ```tsx showLineNumbers title="src/App.tsx"
  import { Button } from "@/components/ui/preskok-ui/button"

  export function App() {
    return <Button>Click me</Button>
  }
  ```
</Steps>