Docs
Astro

Astro

How to setup shadcn-svelte in an Astro project.

Setup your project

Create project

Start by creating a new Astro project:

	npm create astro@latest

Configure your Astro project

You will be asked a few questions to configure your project:

	- 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)
- Do you plan to write TypeScript?
Yes
- How strict should TypeScript be?
Strict
- Install dependencies?
Yes
- Initialize a new git repository? (optional)
Yes/No

Add Svelte to your project

Install Svelte using the Astro CLI:

	npx astro add svelte

Add TailwindCSS to your project

Add Tailwind CSS using the Astro CLI:

	npx astro add tailwind

Setup path aliases

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

tsconfig.json
	{
  "compilerOptions": {
    // ...
    "baseUrl": ".",
    "paths": {
      "$lib/*": ["./src/*"],
    },
    // ...
  },
}

Create a global CSS file

Create the global stylesheet in src/styles/app.css:

src/styles/app.css
	@tailwind base;
@tailwind components;
@tailwind utilities;

Import the global CSS file

Import the app.css file in the src/pages/index.astro file:

src/pages/index.astro
	---
import "$lib/styles/app.css";
---

Run the CLI

Run the shadcn-svelte init command to setup your project:

	npx shadcn-svelte@next init

Configure components.json

You will be asked a few questions to configure components.json:

	Would you like to use TypeScript (recommended)? › Yes
Which style would you like to use? › Default
Which color would you like to use as base color? › Slate
Where is your global CSS file? › src/styles/app.css
Where is your tailwind.config.[cjs|mjs|js|ts] located? › tailwind.config.mjs
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

Update Astro's Tailwind config

To prevent serving the Tailwind base styles twice, we need to tell Astro not to apply the base styles, since we already include them in our own app.css file. To do this, set the applyBaseStyles config option for the tailwind plugin in astro.config.mjs to false.

astro.config.mjs
	export default defineConfig({
  integrations: [
    tailwind({
      applyBaseStyles: false,
    }),
    // ...
  ],
});

Update tailwind.config.mjs

When running shadcn-svelte@next init, your Tailwind config for content will be overwritten. To fix this, add astro as one of the options inside of content:

tailwind.config.mjs
	const config = {
  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
  // ...
};
// ...
export default config;

That's it

You can now start adding components to your project.

	npx shadcn-svelte@next add button

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

index.astro
	---
import { Button } from "$lib/components/ui/button/index.js";
---
 
<html lang="en">
	<head>
		<title>Astro</title>
	</head>
	<body>
		<Button>Hello World</Button>
	</body>
</html>