mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-07-08 22:45:47 +00:00
feat: add astro template
This commit is contained in:
shadcn
@@ -25,10 +25,14 @@ const VITE_LOGO =
|
||||
const LARAVEL_LOGO =
|
||||
'<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Laravel</title><path d="M23.642 5.43a.364.364 0 0 1 .014.1v5.149c0 .135-.073.26-.189.326l-4.323 2.49v4.934a.378.378 0 0 1-.188.326L9.93 23.949a.316.316 0 0 1-.066.027c-.008.002-.016.008-.024.01a.348.348 0 0 1-.192 0c-.011-.002-.02-.008-.03-.012-.02-.008-.042-.014-.062-.025L.533 18.755a.376.376 0 0 1-.189-.326V2.974c0-.033.005-.066.014-.098.003-.012.01-.02.014-.032a.369.369 0 0 1 .023-.058c.004-.013.015-.022.023-.033l.033-.045c.012-.01.025-.018.037-.027.014-.012.027-.024.041-.034h.001L5.044.05a.375.375 0 0 1 .375 0L9.933 2.697h.002c.015.01.027.021.04.033l.038.027c.013.014.02.03.033.045.008.011.02.021.025.033.01.02.017.038.024.058.003.011.01.021.013.032.01.031.014.064.014.098v9.652l3.76-2.164V5.527c0-.033.004-.066.013-.098.003-.01.01-.02.013-.032a.487.487 0 0 1 .024-.059c.007-.012.018-.02.025-.033.012-.015.021-.03.033-.043.012-.012.025-.02.037-.028.014-.011.026-.023.041-.032h.001l4.513-2.647a.375.375 0 0 1 .375 0l4.513 2.647c.016.011.029.021.042.031.012.01.025.018.036.028.013.014.022.03.034.045.008.012.019.021.024.033a.3.3 0 0 1 .024.06c.006.01.012.021.015.032zm-.74 5.032V5.860l-1.578.908-2.182 1.256v4.603zm-4.514 7.75v-4.605l-2.148 1.227-6.876 3.93v4.649zm-17.642-15.3v15.15l8.25 4.757v-4.645L4.699 15.87l-.003-.002-.002-.001c-.014-.01-.025-.021-.04-.033-.012-.01-.026-.018-.036-.028l-.001-.002c-.013-.012-.021-.028-.032-.043-.01-.013-.022-.023-.03-.037v-.002c-.01-.014-.016-.032-.023-.048-.006-.012-.016-.023-.02-.035l-.002-.001c-.005-.018-.008-.037-.011-.057L4.5 15.58v-9.51l-2.182-1.256-1.578-.908zm4.322-2.474L1.313 2.974l3.756 2.163 3.755-2.163zm2.068 11.22 2.182-1.256V1.974L7.937 3.23 5.755 4.486v11.186zm10.895-7.583-3.755 2.163 3.755 2.164 3.755-2.164zm-.375 4.976-2.182-1.256-1.578-.908v4.603l2.182 1.256 1.578.908zm-8.438 6.186 5.494-3.14 2.944-1.682-3.755-2.163-4.323 2.489-4.136 2.384z"/></svg>'
|
||||
|
||||
const ASTRO_LOGO =
|
||||
'<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Astro</title><path d="M8.358 20.162c-1.186-1.07-1.532-3.316-1.038-4.944.856 1.026 2.043 1.352 3.272 1.535 1.897.283 3.76.177 5.522-.678.202-.098.388-.229.608-.36.166.473.209.95.151 1.437-.14 1.16-.738 2.06-1.672 2.783-.514.398-1.07.755-1.61 1.127-1.623 1.12-2.087 2.399-1.39 4.238.018.046.03.094.063.2-.89-.477-1.525-1.13-1.924-2.004-.427-.938-.51-1.92-.348-2.938.073-.468.076-.946-.025-1.4-.232-1.04-.953-1.681-1.96-1.69-.598-.005-1.134.348-1.399.904-.381.799-.244 1.554.225 2.274.257.394.576.74.525 1.516"/><path d="M15.807 2.001a.075.075 0 0 1 .087.048c.009.025.005.053-.01.074l-.064.082c-3.182 4.06-4.16 8.478-2.936 13.254.014.055.04.13-.058.163-.096.033-.156-.04-.188-.107a10 10 0 0 1-.397-.96c-1.15-3.2-.594-6.202 1.094-9.051.469-.793.994-1.55 1.546-2.292l.192-.247c.075-.097.156-.18.257-.254A3 3 0 0 1 15.695 2z"/></svg>'
|
||||
|
||||
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 },
|
||||
|
||||
@@ -73,6 +73,8 @@ const designSystemSearchParams = {
|
||||
"react-router-monorepo",
|
||||
"vite",
|
||||
"vite-monorepo",
|
||||
"astro",
|
||||
"astro-monorepo",
|
||||
"laravel",
|
||||
] as const).withDefault("next"),
|
||||
rtl: parseAsBoolean.withDefault(false),
|
||||
|
||||
@@ -17,6 +17,6 @@
|
||||
"[Changelog](/docs/changelog)",
|
||||
"[llms.txt](/llms.txt)",
|
||||
"legacy",
|
||||
"new"
|
||||
"!new"
|
||||
]
|
||||
}
|
||||
|
||||
@@ -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 <Login03 />
|
||||
}
|
||||
```
|
||||
|
||||
## 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).
|
||||
|
||||
@@ -104,6 +104,8 @@ export const designSystemConfigSchema = z
|
||||
"vite-monorepo",
|
||||
"react-router-monorepo",
|
||||
"start-monorepo",
|
||||
"astro",
|
||||
"astro-monorepo",
|
||||
])
|
||||
.default("next")
|
||||
.optional(),
|
||||
|
||||
@@ -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.
|
||||
|
||||
Reference in New Issue
Block a user