mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-06-11 09:51:40 +00:00
* fix(cli): allow esbuild builds in Vite templates * fix(cli): extend pnpm 11 build-script allowlists across app templates - Add packages: [] to single-app pnpm-workspace.yaml so pnpm 9 does not reject the file with "packages field missing or empty". - Add astro-app, react-router-app, start-app, next-app workspace yamls with the build-script allowlist each template needs (esbuild, sharp, unrs-resolver as applicable). - Set msw: false across all app allowlists so the registry component install runs cleanly under pnpm 11 without executing msw's service-worker postinstall. - Add a scaffold test pinning the packages:[] + allowBuilds shape so the parser keeps treating it as single-app. * chore: changeset * fix(templates): allow monorepo pnpm builds * ci(templates): validate app workspace conversion --------- Co-authored-by: shadcn <m@shadcn.com>
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:
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:
---
import { Button } from "@/components/ui/button"
---
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Astro App</title>
</head>
<body>
<div class="grid h-screen place-items-center content-center">
<Button>Button</Button>
</div>
</body>
</html>