You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
-[Social Media :earth_africa:](#social-media-earth_africa)
65
66
66
67
---
67
68
68
-
## Overview 🌏
69
-
70
-
**This isn't a traditional component library or a replacement for Shadcn**. Instead, it's a unique collection offers customizable variants of components, blocks, and templates. Preview, customize, and copy-paste them into your apps with ease.
71
-
72
-
Building on the solid foundation of the Shadcn components & blocks, we've enhanced it with custom-designed components & blocks to give you a head start. This allows you to craft, customize, and ship your projects faster and more efficiently.
73
-
74
-
### Not a standard library, but a distribution of components
75
-
76
-
Following the philosophy of Shadcn, shadcn/studio isn't a conventional "install-from-NPM" library. Rather, it's an open-source distribution of components designed for maximum adaptability. You can copy the code, modify styles, adjust logic, or integrate it with other tools—free from the limitations of typical libraries. This "open code" model empowers you to customize with confidence and creativity.
77
-
78
69
## Why should I use shadcn/studio? 💡
79
70
80
71
shadcn/ui aims to provide core components with a unique distribution system, allowing developers to copy and paste reusable, customizable UI elements directly into their codebase.
81
72
82
73
While this approach offers flexibility and control, it comes with some limitations: a lack of diverse component variants examples, limited theme customization options, and limited pre-built blocks. Additionally, its extensive customization options, though powerful, can sometimes feel overwhelming, especially for those seeking a more guided or streamlined experience.
83
74
84
-
## This is where shadcn/studio shines ✨
75
+
# Shadcn + Astro — Ink Landing Page
76
+
77
+
A modern, responsive business landing page built with [Astro](https://astro.build/) and [ShadcnUI](https://ui.shadcn.com/).
78
+
79
+
This project showcases a complete business website with sections for Header, Hero, Changelog Timeline,FAQ, and call-to-action components.
80
+
81
+
## ✨ Features
82
+
83
+
- 🚀 **Built with Astro** - Fast, modern static site generation
The site will be available at `http://localhost:4321`
163
+
164
+
3.**Build for production:**
165
+
166
+
```bash
167
+
pnpm build
168
+
```
169
+
170
+
The built site will be in the `dist/` folder with relative asset paths for easy deployment.
171
+
172
+
4.**Preview the production build:**
173
+
174
+
```bash
175
+
pnpm run preview
176
+
```
177
+
178
+
## 🧞 Available Commands
179
+
180
+
The template comes with several pre-configured scripts to help you with development, building, and maintaining your project. All scripts can be run using your package manager of choice (npm, pnpm, yarn, or bun) from the root of the project.
|`dev`| Starts the Astro development server with hot-reload enabled. Your application will be available at http://localhost:4321.build|
185
+
|`build`| Creates an optimized production build of your application. This command generates static files and optimizes your code for deployment. |
186
+
|`preview`| Preview production site locally. Use this to test your production build locally before deploying. |
187
+
|`lint`| Runs ESLint to check your code for potential errors and code quality issues. This helps maintain clean and consistent code. |
188
+
|`lint:fix`| Runs ESLint and automatically fixes problems where possible. |
189
+
|`format`| Formats all files using Prettier to ensure consistent code style. |
190
+
|`check-types`| Checks TypeScript types to catch type errors before building or deploying. |
191
+
192
+
## 🎨 Code Formatting
193
+
194
+
This project uses **Prettier** for code formatting with the following features:
195
+
196
+
-**Automatic formatting on save** in VS Code
197
+
-**Tailwind CSS class sorting** - Classes are automatically sorted in the recommended order
198
+
-**Extra space removal** - Trailing whitespace and extra spaces are removed
199
+
-**Consistent code style** - Enforced across all `.astro`, `.js`, `.ts`, and `.css` files
200
+
201
+
### Setup
202
+
203
+
1.**Install recommended VS Code extensions** (you'll be prompted when opening the project):
204
+
- Prettier - Code formatter
205
+
- Astro
206
+
- Tailwind CSS IntelliSense
207
+
- EditorConfig for VS Code
208
+
209
+
2.**Formatting will work automatically** on save thanks to:
210
+
-`.prettierrc` - Prettier configuration
211
+
-`.editorconfig` - Editor settings
212
+
-`.vscode/settings.json` - VS Code workspace settings
213
+
214
+
3.**Manual formatting:**
215
+
216
+
```bash
217
+
pnpm run format # Format all files
218
+
```
85
219
86
-
An open-source & premium collection of copy-and-paste shadcn components, blocks, and templates - paired with a powerful theme generator to craft, customize, and ship faster 🚀. It provides a robust toolkit for building stunning, interactive user interfaces with ease.
220
+
## ⚙️ Configuration
87
221
88
-
-**Open-source:** Dive into a growing, community-driven collection of copy-and-paste [shadcn/ui components]('https://shadcnstudio.com/components'), shadcn blocks, and templates.
222
+
Edit `src/consts.ts` to customize your site:
89
223
90
-
-**Component & Blocks variants:** Access a diverse, collection of customizable [shadcn blocks](https://shadcnstudio.com/blocks) and component variants to quickly build and style your UI with ease.
224
+
```typescript
225
+
exportconst siteConfig = {
226
+
creatorName: 'Shadcn Studio',
227
+
demoName: 'Ink',
228
+
templateName: 'Blog Landing Page'
229
+
// ... more settings
230
+
}
231
+
```
91
232
92
-
-**Animated variants with Motion:** Add smooth, modern animations to your components, enhancing user experiences with minimal effort.
233
+
## 📦 Dependencies
93
234
94
-
-**Landing pages & Dashboards:** Explore 20+ premium & free [Shadcn templates](https://shadcnstudio.com/templates) for dashboards, landing pages & more. Fully customizable & easy to use.
235
+
### Main Dependencies
95
236
96
-
-**shadcn/ui for Figma:** Speed up your workflow with [Shadcn Figma](https://shadcnstudio.com/figma) UI components, blocks & templates — a full design library inspired by shadcn/ui.
237
+
-**Astro 5.16.6** - Fast static site generator with zero JS by default
238
+
-**React 19.2.3** - UI library for interactive components
-**Powerful theme generator:** Customize your UI instantly with [Shadcn Theme Generator](https://shadcnstudio.com/theme-generator). Preview changes in real time and create consistent, on-brand designs faster.
247
+
### Key Plugins
99
248
100
-
-**shadcn/studio MCP:** Integrate [shadcn/studio MCP](https://shadcnstudio.com/mcp) Server directly into your favorite IDE and craft stunning shadcn/ui Components, Blocks and Pages inspired by shadcn/studio.
249
+
-**lucide-react** - Beautiful, consistent icon library with 562+ React icons
250
+
-**prettier-plugin-tailwindcss** - Automatic Tailwind CSS class sorting
251
+
-**@tailwindcss/typography** - Professional typographic styles
252
+
-**prettier-plugin-astro** - Astro code formatting support
253
+
-**ESLint & TypeScript** - Code quality and type safety tools
101
254
102
-
-**Shadcn Figma To Code Plugin:** Convert your Figma designs into production-ready code instantly with the [Shadcn Figma Plugin](https://shadcnstudio.com/figma-plugin).
255
+
## 🌐 Deployment
103
256
104
-
## Features ✨
257
+
The production build creates static files with relative asset paths, making it easy to deploy to:
105
258
106
-
1.**Live Theme Generator:** See your shadcn components transform instantly as you experiment with styles in real time.
107
-
2.**Color Mastery:** Play with background, text, and border hues using a sleek color picker for a unified design.
108
-
3.**Typography Fine-Tuning:** Perfect your text with adjustable font sizes, weights, and transformations for a polished look.
109
-
4.**Tailwind v4 Compatibility:** Effortlessly use Tailwind v4, supporting OKLCH, HSL, RGB & HEX color formats.
110
-
5.**Stunning Theme Starters:** Kick off with gorgeous pre-built themes and customize light or dark modes in a breeze.
111
-
6.**Hold to Save Theme:** Preserve your custom themes with a quick hold, making them easy to reuse or share later.
259
+
-**GitHub Pages**
260
+
-**Netlify**
261
+
-**Vercel**
262
+
-**Any static hosting service**
263
+
264
+
Simply upload the contents of the `dist/` folder after running `pnpm run build`.
112
265
113
266
## Documentation 📚
114
267
115
-
For comprehensive documentation, please visit [shadcnstudio.com](https://shadcnstudio.com/docs/getting-started/shadcn-studio-template-astro).
268
+
For comprehensive documentation, please visit [shadcn/studio documentation](https://shadcnstudio.com/docs/getting-started/shadcn-studio-template-nextjs).
116
269
117
270
## Community 🤝
118
271
@@ -121,21 +274,6 @@ Join the shadcn/studio community to discuss the library, ask questions, and shar
121
274
- 🐦 [Follow us on Twitter](https://x.com/ShadCNStudio)
122
275
- 🎮 [Join us on Discord](https://discord.com/invite/kBHkY7DekX)
123
276
124
-
## Credits 🤘
125
-
126
-
We are grateful for the contributions of the open-source community, particularly:
127
-
128
-
-[shadcn/ui](https://ui.shadcn.com/)
129
-
-[tweakcn](https://tweakcn.com/) (Our Theme Generator is heavily inspired by tweakcn)
130
-
131
-
These projects form the backbone of shadcn/studio, allowing us to build a powerful copy-and-paste components.
- Licensed under [MIT](https://github.com/themeselection/shadcn-studio/blob/main/LICENSE.md)
137
-
- shadcn/studio is an open-source collection of copy-and-paste shadcn components, blocks, and templates - paired with a powerful theme generator to craft, customize, and ship faster.
0 commit comments