143820f85959f63dd0e56f6f2ebbaae1f92b510c
- Richer color palette with more chroma and warmer tones - Subtle paper texture background - Stronger shadow scale (sm/md/lg/xl) - Hero: larger typography, decorative ring, enhanced choreography - Trust: star rating row, decorative background rings, bigger scale - Services: card backgrounds with lift-on-hover shadows - Reviews: stronger hover lift, thicker borders - Team: image border, stronger avatar hover effects - SalonPromise: decorative ring, hover states, fixed grid alignment - SiteHeader: frosted glass backdrop-filter, stronger brand mark - FinalCta: decorative ring, stronger radial gradients
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>
Description
Languages
Astro
51%
CSS
31.1%
TypeScript
16.2%
JavaScript
1.7%