Logo

Get started with ONE in minutes. This guide will walk you through setup, customization, and best practices.

Quick Start

  1. Clone the Repository
git clone https://github.com/one-ie/one.git
cd astro-shadcn
  1. Install Dependencies
npm install
  1. Start Development Server
npm run dev

Visit http://localhost:4321 to see your site in action!

Key Features

  1. Performance First Architecture

    • Zero JavaScript by default
    • Automatic image optimization
    • Built-in SEO optimizations
    • Perfect Lighthouse scores out of the box

  2. Beautiful UI Components

    • Full Shadcn/UI component library
    • Dark mode support
    • Customizable theme
    • Accessible by default

  3. Developer Experience

    • TypeScript support
    • Hot module reloading
    • Component auto-imports
    • Tailwind CSS integration

Customizing Your Site

Theme Configuration

Edit src/styles/globals.css to customize your color scheme:

:root {
  --primary: 222.2 47.4% 11.2%;
  --secondary: 210 40% 96.1%;
  /* Add your custom colors here */
}

Adding New Components

  1. Use the CLI to add Shadcn components:
npx shadcn-ui add button
  1. Import and use in your Astro pages:
---
import { Button } from "@/components/ui/button"
---

<Button>Click me!</Button>

Best Practices

  • ✅ Use static routes when possible
  • ✅ Implement image optimization with <Image /> component
  • ✅ Leverage client directives wisely
  • ✅ Follow the component-first architecture
  • ✅ Utilize TypeScript for better type safety

Need Help?

Loading...