Astro

> ## Documentation Index > Fetch the complete documentation index at: https://mintlify.com/huntabyte/shadcn-svelte/llms.txt > Use this file to discover all available pages before exploring further. # Astro > How to setup shadcn-svelte in an Astro project. Start by creating a new Astro project: ```bash theme={null} npm create astro@latest ``` You will be asked a few questions to configure your project: ```bash theme={null} - Where should we create your new project? ./your-app-name - How would you like to start your new project? Choose a starter template (or Empty) - Install dependencies? Yes - Initialize a new git repository? (optional) Yes/No ``` Install Svelte using the Astro CLI: ```bash theme={null} npx astro add svelte ``` Answer `Yes` to all the question prompted by the CLI when installing Svelte. Add Tailwind CSS using the Astro CLI: ```bash theme={null} npx astro add tailwind ``` Answer `Yes` to all the question prompted by the CLI when installing TailwindCSS. Import the `global.css` file in the `src/pages/index.astro` file: ```astro title="src/pages/index.astro" theme={null} --- import "../styles/global.css"; --- ``` Add the following code to the `tsconfig.json` file to resolve paths: ```json title="tsconfig.json" theme={null} { "compilerOptions": { // ... "baseUrl": ".", "paths": { "$lib": ["./src/lib"], "$lib/*": ["./src/lib/*"] } // ... } } ``` If needed, adapt the path aliases to your specific needs ([learn more about it](https://docs.astro.build/en/guides/aliases/)). Run the `shadcn-svelte` init command to setup your project: ```bash theme={null} npx shadcn-svelte@latest init ``` You will be asked a few questions to configure `components.json`: ```txt theme={null} Which base color would you like to use? › Slate Where is your global CSS file? (this file will be overwritten) › src/styles/global.css Configure the import alias for lib: › $lib Configure the import alias for components: › $lib/components Configure the import alias for utils: › $lib/utils Configure the import alias for hooks: › $lib/hooks Configure the import alias for ui: › $lib/components/ui ``` You can now start adding components to your project. ```bash theme={null} npx shadcn-svelte@latest add button ``` The command above will add the `Button` component to your project. You can then import it like this: ```astro title="index.astro" theme={null} --- import { Button } from "$lib/components/ui/button/index.js"; --- Astro ``` Remember to use the `client` directives inside `.astro` files when dealing with interactive components ([learn more about it](https://docs.astro.build/en/reference/directives-reference/#client-directives)).