Beautiful, customizable, and embeddable widgets built with Astro, React, and shadcn/ui components.
This project now includes a complete shadcn/ui setup with all essential components:
- 🎨 Full Component Library: Button, Card, Input, Dialog, Select, Switch, Tabs, Badge, and more
- 🌙 Dark Mode Support: Complete dark/light theme system
- 📱 Responsive Design: All components work perfectly on any screen size
- ♿ Accessibility: Built-in ARIA support and keyboard navigation
- 🎯 TypeScript Ready: Full type safety and IntelliSense
- Demo Page - Interactive showcase of all shadcn/ui components
- Notes Widget - Real-world example using shadcn/ui
- Integration Guide - Complete setup and usage documentation
npm create astro@latest -- --template basics🧑🚀 Seasoned astronaut? Delete this file. Have fun!
Inside of your Astro project, you'll see the following folders and files:
/
├── public/
│ └── favicon.svg
├── src
│ ├── assets
│ │ └── astro.svg
│ ├── components
│ │ └── Welcome.astro
│ ├── layouts
│ │ └── Layout.astro
│ └── pages
│ └── index.astro
└── package.json
To learn more about the folder structure of an Astro project, refer to our guide on project structure.
All commands are run from the root of the project, from a terminal:
| Command | Action |
|---|---|
npm install |
Installs dependencies |
npm run dev |
Starts local dev server at localhost:4321 |
npm run build |
Build your production site to ./dist/ |
npm run preview |
Preview your build locally, before deploying |
npm run astro ... |
Run CLI commands like astro add, astro check |
npm run astro -- --help |
Get help using the Astro CLI |
Feel free to check our documentation or jump into our Discord server.