shadcn/studio Templates Astro

Get started with shadcn/studio Templates for Astro. A complete guide to installation, setup, configuration, and customization of your Astro project.

What does the shadcn/studio Template mean?#

The shadcn/studio Template for Astro is a comprehensive, production-ready template that comes with everything you need to build modern web applications quickly and efficiently.

Pre-configured Astro Setup

Latest Astro version with optimal configurations

shadcn/ui Components

Pre-installed shadcn/ui components with Tailwind CSS styling

Layout Structure

Professional layouts with header, footer, sidebar, and navigation components

Responsive Design

Mobile-first, fully responsive components and layouts

Dark Mode Support

Built-in theme switching with dark mode implementation

TypeScript Ready

Full TypeScript support with type definitions

How can I access the Template?#

To access the shadcn/studio Template source code for Astro, follow these steps:

If you have purchased pro plan, please login with your credentials.
Navigate to the Templates Page.
Checkout out the detail view by clicking "View Template" button for the shadcn/studio Template you are looking for.
Click on the "Download" button to download the source code as a ZIP file.
Extract the downloaded ZIP file to your desired location on your computer.

Note:

Once you have downloaded and extracted the template ZIP file, you can follow the instructions below to set up and use the templates in your project.

Folder Structure#

The template follows Astro conventions with a clean and organized structure:

Key Directories:

public/

Ideal for favicons, images, robots.txt, and manifests

src/assets/

Media assets used inside components such like SVGs, logos, and background illustrations.

src/components/

Reusable React components including shadcn/ui components in the ui/ subdirectory

src/layouts/

Page layouts shared across routes. Centralizes page structure and SEO logic.

src/pages/

File-based routing, where Each file becomes a route such as index.astro, login.astro.

Getting Started#

Note:

Before getting started with the shadcn/studio Templates, ensure you have the following requirements:

Node.js installed on your machine (version 18.17 or higher)
A package manager like npm, pnpm, yarn, or bun
A code editor like VS Code or any modern IDE
Git for version control

Step 1: Install Dependencies

After downloading and extracting the template, navigate to the project directory and install the dependencies:

Tip:

We recommend using pnpm for faster installation and better disk space efficiency. If you don't have pnpm installed, you can install it with
npm install -g pnpm

Step 2:Start Development Server

Once dependencies are installed, you can start the development server:

The development server will start at http://localhost:4321 . Open this URL in your browser to see your application.

Step 3: Build for Production

Before deploying your application, build it for production:

Step 4: Preview the Production Build

This will preview the built site locally:

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.

Command	Description
dev	Starts the Astro development server with hot-reload enabled. Your application will be available at `http://localhost:4321`.
build	Creates an optimized production build of your application. This command generates static files and optimizes your code for deployment.
preview	Preview production site locally. Use this to test your production build locally before deploying.
lint	Runs ESLint to check your code for potential errors and code quality issues. This helps maintain clean and consistent code.
lint:fix	Runs ESLint and automatically fixes fixable issues. This is useful for quickly resolving common code quality problems.
format	Formats all files in the `src/` directory using Prettier for consistent code styling.
check-types	Runs the TypeScript compiler to check for type errors without generating output files. This ensures your TypeScript code is type-safe.

How to add a New Page?#

Adding a new page in Astro is simple. Follow the steps below:

1. Create a new folder

Navigate to src/pages/ and create a new file with your desired route name, for example about with .astro extension. The development server will automatically detect the new route.

2. Add Page Content

Open the file and add your content. You can also use components and import inside about.astro

3. Access your new page

Your new page will be available at http://localhost:4321/about.

Learn More

For dynamic routes, refer: Astro Routing Documentation

How to add a New Section / Block?#

Select the block you want to add to your project. Refer to Blocks Documentation for more info.
Copy the registry command for the selected block.
Open your terminal and run the CLI command from the project root.
The block will be added to your project and all required dependencies will be installed automatically.
Copy the corresponding data from app/block-name/page.tsx and create a new file insidesrc/components/sections/block-name.tsx and paste the copied data.
Note:
This is necessary due to how shadcn registries are structured. The registry follows an app directory-based structure, which is specific to Next.js. Since Astro does not support this directory structure, the files cannot be consumed automatically.
As a result, you must manually copy and paste the required files into your project.
Import the new section/block into your page or src/pages/index.astro file.

Preview the block in your development server to ensure everything works as expected.

How to Update the Site Info/Configuration?#

The template uses a centralized configuration approach for easy customization. All site metadata, SEO settings, and branding are managed through two main files.

1. Update Site Constants (src/consts.ts)

The src/consts.ts file is the central hub for all your site's metadata, SEO configuration, and company information.

Basic Site Information:

SEO Metadata:

Update the SITE_METADATA object with your site's SEO settings:

Social Links & Company Info:

2. Update PWA Manifest (public/site.webmanifest)

The public/site.webmanifest file configures your Progressive Web App (PWA) settings.

3. Update Favicons and Images

Replace the default favicon files in public/favicon/ and the OG image at public/images/og-image.png with your own branding assets.

How to change the theme of my template?#

You can update the theme of your template using one of the following two methods:

Method 1: Using Theme CLI (Recommended)

This is the easiest and recommended way to update your theme using the Theme CLI.

Open the Theme Generator in shadcn/studio.
Select a theme from the Theme dropdown, or create a custom theme using the Theme Generator. For detailed guidance, refer to Theme Generator Documentation.
Click the Copy button at the top.
Copy the Theme CLI command based on your preferred CLI version (v2/v3) and package manager. For more details related to the CLI, refer to CLI Documentation.
Run the copied command in the root directory of your project. It will update your global.css with the new theme variables.
To update the font family, note the font variables used by the theme such as --font-sans, --font-serif, and --font-mono in src/styles/global.css.
Open src/layouts/HeadSeo.astro and import the required fonts from Google Fonts as shown below (example uses the Pastel Dreams theme):

Method 2: Manually Updating Theme Variables

Use this method if you prefer full control over theme variables without using the CLI.

Open the Theme Generator in shadcn/studio.
Select a theme from the Theme dropdown, or create a custom theme using the Theme Generator. For detailed guidance, refer to Theme Generator Documentation.
Click the Copy button to copy all theme variables.
Open src/styles/global.css and update the theme variables inside :root and .dark with the copied values.
Configure font families by following the font setup step 6 and step 7 described in Theme CLI method.