diff --git a/.changeset/happy-days-drum.md b/.changeset/happy-days-drum.md
new file mode 100644
index 000000000..4dc297b39
--- /dev/null
+++ b/.changeset/happy-days-drum.md
@@ -0,0 +1,5 @@
+---
+"shadcn": major
+---
+
+add astro template support
diff --git a/apps/v4/app/(create)/components/template-picker.tsx b/apps/v4/app/(create)/components/template-picker.tsx
index bcc23a4a7..5c11a333e 100644
--- a/apps/v4/app/(create)/components/template-picker.tsx
+++ b/apps/v4/app/(create)/components/template-picker.tsx
@@ -25,10 +25,14 @@ const VITE_LOGO =
const LARAVEL_LOGO =
''
+const ASTRO_LOGO =
+ ''
+
export const TEMPLATES = [
[
{ value: "next", title: "Next.js", logo: NEXT_LOGO },
{ value: "vite", title: "Vite", logo: VITE_LOGO },
+ { value: "astro", title: "Astro", logo: ASTRO_LOGO },
],
[
{ value: "start", title: "TanStack Start", logo: START_LOGO },
diff --git a/apps/v4/app/(create)/lib/search-params.ts b/apps/v4/app/(create)/lib/search-params.ts
index 1cbf55fd2..c092c4db9 100644
--- a/apps/v4/app/(create)/lib/search-params.ts
+++ b/apps/v4/app/(create)/lib/search-params.ts
@@ -73,6 +73,8 @@ const designSystemSearchParams = {
"react-router-monorepo",
"vite",
"vite-monorepo",
+ "astro",
+ "astro-monorepo",
"laravel",
] as const).withDefault("next"),
rtl: parseAsBoolean.withDefault(false),
diff --git a/apps/v4/content/docs/(root)/meta.json b/apps/v4/content/docs/(root)/meta.json
index b0949ac28..307a8f154 100644
--- a/apps/v4/content/docs/(root)/meta.json
+++ b/apps/v4/content/docs/(root)/meta.json
@@ -17,6 +17,6 @@
"[Changelog](/docs/changelog)",
"[llms.txt](/llms.txt)",
"legacy",
- "new"
+ "!new"
]
}
diff --git a/apps/v4/content/docs/(root)/new.mdx b/apps/v4/content/docs/(root)/new.mdx
index e6f250bc7..90f8528a5 100644
--- a/apps/v4/content/docs/(root)/new.mdx
+++ b/apps/v4/content/docs/(root)/new.mdx
@@ -1,9 +1,9 @@
---
title: Your project is ready!
-description: You've created a new project with shadcn/ui. Here's what to do next.
+description: You've created a new project with shadcn/ui.
---
-Here are the next steps to start building.
+Here's a few things you can do to get started building with shadcn/ui.
## Add Components
@@ -39,19 +39,61 @@ Browse all components on the [Components](/docs/components) page.
## Customize Your Theme
-You can create a custom theme visually on [ui.shadcn.com](https://ui.shadcn.com) and apply it to your project using a preset code.
+You can edit your theme directly in your CSS file. Learn more about [Theming](/docs/theming) and how to use CSS variables or utility classes.
+
+If you want to try a new preset, you can create a custom theme visually on [ui.shadcn.com](https://ui.shadcn.com) and apply it to your project using a preset code.
```bash
-npx shadcn@latest init --preset a2r6bw
+npx shadcn@latest init --preset [CODE]
```
-You can also edit your theme directly in your CSS file. Learn more about [Theming](/docs/theming).
+## Add a block
-## Configure Your Project
+You can add a block to your project using the CLI.
-Your project settings are stored in `components.json`. You can change import aliases, the icon library, or switch between base primitives.
+```bash
+npx shadcn@latest add login-03
+```
-Learn more about [components.json](/docs/components-json).
+This will add the `login-03` block to your project. Import and use it in your code.
+
+```tsx title="app/page.tsx"
+import { Login03 } from "@/components/login-03"
+
+export default function Home() {
+ return
+}
+```
+
+## Install from Registries
+
+shadcn/ui has a growing ecosystem of community registries. You can install components from any registry URL using the CLI.
+
+```bash
+npx shadcn@latest add @[registry]/[name]
+```
+
+Browse the [Registry Directory](/docs/directory) for a list of available registries.
+
+## Use AI to Build
+
+shadcn/ui is designed to work with AI. Your AI assistant can read the component source code in your project, understand the APIs, and compose them together to build pages and features.
+
+Here are some example prompts to try:
+
+- _"Create a signup page with a form for entering name, email and password."_
+- _"Create a settings page with a form for updating profile information."_
+- _"Build a dashboard with a header, stats cards, and a data table."_
+
+## Install the shadcn Skills
+
+Install the shadcn skill in your AI assistant. This will give your AI assistant access to the full component registry, documentation, and search.
+
+```bash
+npx skills add shadcn-ui/ui
+```
+
+Learn more about the [shadcn skill](/docs/skill).
## Connect the MCP Server
@@ -62,23 +104,3 @@ npx shadcn@latest mcp init
```
Learn more on the [MCP Server](/docs/mcp) page.
-
-## Use AI to Build
-
-shadcn/ui is designed to work with AI. Your AI assistant can read the component source code in your project, understand the APIs, and compose them together to build pages and features.
-
-Here are some example prompts to try:
-
-- _"Create a settings page with a form for updating profile information."_
-- _"Add a sidebar navigation with collapsible groups."_
-- _"Build a dashboard with a header, stats cards, and a data table."_
-
-## Install from Registries
-
-shadcn/ui has a growing ecosystem of community registries. You can install components from any registry URL using the CLI.
-
-```bash
-npx shadcn@latest add https://example.com/r/my-component.json
-```
-
-Browse registries on the [Directory](/docs/directory) page. You can also [build and publish your own registry](/docs/registry).
diff --git a/apps/v4/registry/config.ts b/apps/v4/registry/config.ts
index 594a602ec..54d71f7fa 100644
--- a/apps/v4/registry/config.ts
+++ b/apps/v4/registry/config.ts
@@ -104,6 +104,8 @@ export const designSystemConfigSchema = z
"vite-monorepo",
"react-router-monorepo",
"start-monorepo",
+ "astro",
+ "astro-monorepo",
])
.default("next")
.optional(),
diff --git a/apps/v4/scripts/build-registry.mts b/apps/v4/scripts/build-registry.mts
index c1b9f4438..d30aa409f 100644
--- a/apps/v4/scripts/build-registry.mts
+++ b/apps/v4/scripts/build-registry.mts
@@ -27,10 +27,12 @@ const TEMPLATE_NAMES = [
"vite-app",
"react-router-app",
"start-app",
+ "astro-app",
"next-monorepo",
"vite-monorepo",
"react-router-monorepo",
"start-monorepo",
+ "astro-monorepo",
]
// Collect paths for batch prettier formatting at the end.
diff --git a/packages/shadcn/src/templates/astro.ts b/packages/shadcn/src/templates/astro.ts
new file mode 100644
index 000000000..424477881
--- /dev/null
+++ b/packages/shadcn/src/templates/astro.ts
@@ -0,0 +1,60 @@
+import dedent from "dedent"
+
+import { createTemplate } from "./create-template"
+import { fontsourceMonorepoInit } from "./monorepo"
+
+export const astro = createTemplate({
+ name: "astro",
+ title: "Astro",
+ defaultProjectName: "astro-app",
+ templateDir: "astro-app",
+ frameworks: ["astro"],
+ create: async () => {
+ // Empty for now.
+ },
+ files: [
+ {
+ type: "registry:page",
+ path: "src/pages/index.astro",
+ target: "src/pages/index.astro",
+ content: dedent`---
+import Layout from "@/layouts/main.astro"
+import { ComponentExample } from "@/components/component-example"
+---
+
+
+
+
+`,
+ },
+ ],
+ monorepo: {
+ templateDir: "astro-monorepo",
+ packageManager: "pnpm",
+ installArgs: ["--no-frozen-lockfile"],
+ init: fontsourceMonorepoInit,
+ files: [
+ {
+ type: "registry:page",
+ path: "src/pages/index.astro",
+ target: "src/pages/index.astro",
+ content: dedent`---
+import "@workspace/ui/globals.css"
+import { ComponentExample } from "@/components/component-example"
+---
+
+
+
+
+
+ Astro App
+
+
+
+
+
+`,
+ },
+ ],
+ },
+})
diff --git a/packages/shadcn/src/templates/index.ts b/packages/shadcn/src/templates/index.ts
index 654c64214..54af7acce 100644
--- a/packages/shadcn/src/templates/index.ts
+++ b/packages/shadcn/src/templates/index.ts
@@ -1,3 +1,4 @@
+import { astro } from "./astro"
import { next } from "./next"
import { reactRouter } from "./react-router"
import { start } from "./start"
@@ -15,6 +16,7 @@ export const templates = {
vite,
start,
"react-router": reactRouter,
+ astro,
}
// Resolve a template key from a detected framework name.
diff --git a/templates/astro-app/.gitignore b/templates/astro-app/.gitignore
new file mode 100644
index 000000000..f52a46e5d
--- /dev/null
+++ b/templates/astro-app/.gitignore
@@ -0,0 +1,23 @@
+# build output
+dist/
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store
+
+# jetbrains setting folder
+.idea/
diff --git a/templates/astro-app/.prettierignore b/templates/astro-app/.prettierignore
new file mode 100644
index 000000000..35bc32e4a
--- /dev/null
+++ b/templates/astro-app/.prettierignore
@@ -0,0 +1,6 @@
+node_modules/
+coverage/
+.pnpm-store/
+pnpm-lock.yaml
+package-lock.json
+yarn.lock
diff --git a/templates/astro-app/.prettierrc b/templates/astro-app/.prettierrc
new file mode 100644
index 000000000..0b9ca38b5
--- /dev/null
+++ b/templates/astro-app/.prettierrc
@@ -0,0 +1,19 @@
+{
+ "endOfLine": "lf",
+ "semi": false,
+ "singleQuote": false,
+ "tabWidth": 2,
+ "trailingComma": "es5",
+ "printWidth": 80,
+ "plugins": ["prettier-plugin-astro", "prettier-plugin-tailwindcss"],
+ "tailwindStylesheet": "src/styles/global.css",
+ "tailwindFunctions": ["cn", "cva"],
+ "overrides": [
+ {
+ "files": "*.astro",
+ "options": {
+ "parser": "astro"
+ }
+ }
+ ]
+}
diff --git a/templates/astro-app/README.md b/templates/astro-app/README.md
new file mode 100644
index 000000000..e17b0f012
--- /dev/null
+++ b/templates/astro-app/README.md
@@ -0,0 +1,36 @@
+# Astro + React + TypeScript + shadcn/ui
+
+This is a template for a new Astro project with React, TypeScript, and shadcn/ui.
+
+## Adding components
+
+To add components to your app, run the following command:
+
+```bash
+npx shadcn@latest add button
+```
+
+This will place the ui components in the `src/components` directory.
+
+## Using components
+
+To use the components in your app, import them in an `.astro` file:
+
+```astro
+---
+import { Button } from "@/components/ui/button"
+---
+
+
+
+
+
+ Astro App
+
+
+