TuMarca

Installation

How to install and configure Saastro UI in your Astro project.

Installation

Learn how to install and configure Saastro UI in your Astro project.

Prerequisites

Before you begin, make sure you have:

Quick Start with CLI

The easiest way to get started is using our CLI:

npx saastro init

This will:

  1. Create a components.json configuration file
  2. Set up your Tailwind CSS configuration
  3. Add the required CSS variables
  4. Install the cn utility function

Adding Components

Once initialized, you can add components using:

npx saastro add button

Or add multiple components at once:

npx saastro add button card badge

Manual Installation

If you prefer to set things up manually:

1. Install dependencies

npm install tailwind-variants clsx tailwind-merge

2. Add the cn utility

Create src/lib/utils.ts:

import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

3. Configure CSS variables

Add these variables to your global CSS:

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;
    --primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;
    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;
    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 0 0% 3.9%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;
    /* ... dark mode variables */
  }
}

4. Copy components

Copy the component files from the registry into your src/components/ui directory.

Project Structure

After installation, your project structure should look like:

src/
├── components/
│   └── ui/
│       ├── button.astro
│       ├── card.astro
│       └── ...
├── lib/
│   └── utils.ts
└── styles/
    └── globals.css

Next Steps