# Astro (/installation/astro)



<Steps>
  ### Create project [#create-project]

  Start by creating a new Astro project:

  ```bash
  npx create-astro@latest astro-app  --template with-tailwindcss --install --add react --git
  ```

  ### Edit tsconfig.json file [#edit-tsconfigjson-file]

  Add the following code to the `tsconfig.json` file to resolve paths:

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

  ### Run the CLI [#run-the-cli]

  Run the shadcn CLI to set up Preskok UI and install your first component:

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

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

  ```astro title="src/pages/index.astro" {2,16} showLineNumbers
  ---
  import { Button } from "@/components/ui/preskok-ui/button"
  ---

  <html lang="en">
  	<head>
  		<meta charset="utf-8" />
  		<meta name="viewport" content="width=device-width" />
  		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
  		<meta name="generator" content={Astro.generator} />
  		<title>Astro + TailwindCSS</title>
  	</head>

  	<body>
  		<div className="grid place-items-center h-screen content-center">
  			<Button>Button</Button>
  		</div>
  	</body>
  </html>
  ```
</Steps>