Installation
Overview of the sequence astro theme documentation.
Welcome to the Sequence Astro theme documentation. This guide will help you set up the theme and understand its project structure. Sequence is a modern, well-designed Astro theme built with React, TypeScript and Shadcn UI. It is designed to be fully responsive, accessible, and easy to customize.
Follow these steps to get your project up and running:
Prerequisites
Ensure you have Node.js (v20 or higher) installed on your machine.
Install Dependencies
Navigate to your project directory and install the required dependencies:
npm installStart Development Server
Start the local development server to preview your site:
npm run devYour site should now be running at http://localhost:4321.
Deploy your site
Deploy theme using popular hosting services:
- Netlify: Flexible deployment with consistent CI/CD integration
- Vercel: Quick and free deployment optimized for Astro sites (default)
Project Structure
The theme follows a structured organization within the src/ directory. Here is an overview of the key folders and files:
src/
├── assets/ # Static assets like images, SVGs, and fonts
│ ├── avatar/ # User avatars
│ ├── company/ # Company logos and branding
│ ├── icons/ # General SVG icons
│ └── integrations/ # Integration partner logos
│
├── components/ # Reusable UI components
│ ├── ui/ # Shadcn UI primitives (Buttons, Inputs, etc.)
│ ├── core/ # React components for the theme
│ ├── cards/ # Card layouts and variations
│ ├── cta/ # Call-to-Action sections
│ └── *.astro # Astro components (Header, Footer, Head, etc.)
│
├── layouts/ # Page layouts (Base, Docs, etc.)
├── pages/ # Astro pages / Routes
├── styles/ # Global styles (Tailwind CSS, custom CSS)
├── content/ # Content collections
├── hooks/ # Custom React hooks
├── lib/ # Utility functions and shared logic
├── consts.ts # Site-wide constants
└── types.ts # TypeScript type definitionsKey Directories
| Directory | Description |
|---|---|
assets/ | Contains all media files. Organize your images here to be optimized by Astro. |
components/ui/ | This directory houses the Shadcn UI components. These are accessible, unstyled components that you can customize. |
components/core/ | Custom React components built specifically for this theme, handling interactive elements and complex logic. |
pages/ | File-based routing for your Astro application. Each .astro or .md file here becomes a route on your site. |
content/ | This directory is used to store your content collection. |
Components
Checkout astro and react components in the sidebar.