# Next.js (/installation/next)



<Steps>
  ### Create a Next.js app [#create-a-nextjs-app]

  Create a Next.js app with Tailwind CSS and the `@/*` import alias:

  ```bash
  npx create-next-app@latest my-app --ts --tailwind --eslint --app --src-dir --import-alias "@/*"
  cd my-app
  ```

  ### Initialize Preskok UI [#initialize-preskok-ui]

  Run the shadcn CLI from the project root:

  ```bash
  npx shadcn@latest init @preskok/default
  ```

  This installs the Preskok base registry item, writes `components.json`, configures the `@preskok` registry namespace, and adds the shared utilities used by Preskok components.

  ### Add a component [#add-a-component]

  Add components through the Preskok registry namespace:

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

  The command above will add the `Button` component to your project. You can then import it like this:

  ```tsx {1,6} showLineNumbers title="app/page.tsx"
  import { Button } from "@/components/ui/preskok-ui/button"

  export default function Home() {
    return (
      <div>
        <Button>Click me</Button>
      </div>
    )
  }
  ```
</Steps>