# Astro Shade DX Template

> **English** | [Español](#español)

<div align="center">
  <a href="https://www.npmjs.com/package/@hkxdv/astro-shade-dx-template">
    <img src="https://img.shields.io/npm/v/@hkxdv/astro-shade-dx-template.svg?style=flat-square" alt="npm version">
  </a>
  &nbsp;&nbsp;&nbsp;
  <a href="https://opensource.org/licenses/MIT">
    <img src="https://img.shields.io/badge/License-MIT-blue.svg" alt="License: MIT">
  </a>
  &nbsp;&nbsp;&nbsp;
  <div>
    <code style="background: none; color: white; display: block; text-align: center; font-size: 1.1em;">bunx @hkxdv/astro-shade-dx-template</code>
  </div>
</div>

---

<div align="center">
  <a href="https://astro.build/">
    <img src="./svgs/astro_dark.svg" alt="Astro" width="50" height="50">
  </a>
  &nbsp;&nbsp;&nbsp;
  <a href="https://react.dev/">
    <img src="./svgs/react_dark.svg" alt="React" width="50" height="50">
  </a>
  &nbsp;&nbsp;&nbsp;
  <a href="https://tailwindcss.com/">
    <img src="./svgs/tailwindcss.svg" alt="TailwindCSS" width="50" height="50">
  </a>
  &nbsp;&nbsp;&nbsp;
  <a href="https://www.typescriptlang.org/">
    <img src="./svgs/typescript.svg" alt="TypeScript" width="50" height="50">
  </a>
  &nbsp;&nbsp;&nbsp;
  <a href="https://bun.sh/">
    <img src="./svgs/bun.svg" alt="Bun" width="50" height="50">
  </a>
  &nbsp;&nbsp;&nbsp;
  <a href="https://ui.shadcn.com/">
    <img src="./svgs/shadcn-ui_dark.svg" alt="shadcn/ui" width="50" height="50">
  </a>
  &nbsp;&nbsp;&nbsp;
  <a href="https://biomejs.dev/">
    <img src="./svgs/biomejs.svg" alt="Biome" width="50" height="50">
  </a>
  &nbsp;&nbsp;&nbsp;
  <a href="https://prettier.io/">
    <img src="./svgs/prettier_dark.svg" alt="Prettier" width="50" height="50">
  </a>
  &nbsp;&nbsp;&nbsp;
  <a href="https://eslint.org/">
    <img src="./svgs/eslint.svg" alt="ESLint" width="50" height="50">
  </a>
</div>

---

Astro template with React, shadcn/ui, Bun, Biome & ESLint. Pre-configured TypeScript, Tailwind CSS, dark/light themes, and optimized DX.

## Features

- **Astro**: Modern web framework for static sites and applications
- **shadcn/ui**: Beautiful, accessible components pre-configured
- **TailwindCSS**: Utility-first CSS framework
- **React**: Full support for React components
- **Optional Linting**: Configure ESLint + Prettier or Biome based on your preference (chosen interactively)
- **Dark/Light Theme**: Fully implemented theme system
- **Interactive CLI**: User-friendly interface to configure your project
- **Modular Code**: Organized and maintainable structure

## Installation & Usage

You don't need to install this package permanently. Simply use `bunx` to run the interactive setup wizard:

```bash
bunx @hkxdv/astro-shade-dx-template
```

The wizard will guide you through naming your project and selecting the template type (Demo or Base) and linter preference (Biome, ESLint, or None).

## Available Templates (Chosen Interactively)

- **demo**: Complete template with all shadcn/ui components, page examples, theme system, and advanced UI features.
- **base**: Minimal template with essential dependencies and basic components.

### Linter Options (Chosen Interactively)

- **Biome**: Single tool for formatting and linting with superior performance.
- **ESLint + Prettier**: Traditional setup with extensive rule customization.
- **None**: No linter configured.

---

<a name="español"></a>

# Astro Shade DX Template

> [English](#astro-shade-dx-template) | **Español**

<div align="center">
  <a href="https://www.npmjs.com/package/@hkxdv/astro-shade-dx-template">
    <img src="https://img.shields.io/npm/v/@hkxdv/astro-shade-dx-template.svg?style=flat-square" alt="npm version">
  </a>
  &nbsp;&nbsp;&nbsp;
  <a href="https://opensource.org/licenses/MIT">
    <img src="https://img.shields.io/badge/License-MIT-blue.svg" alt="License: MIT">
  </a>
  &nbsp;&nbsp;&nbsp;
  <div>
    <code style="background: none; color: white; display: block; text-align: center; font-size: 1.1em;">bunx @hkxdv/astro-shade-dx-template</code>
  </div>
</div>

---

<div align="center">
  <a href="https://astro.build/">
    <img src="./svgs/astro_dark.svg" alt="Astro" width="50" height="50">
  </a>
  &nbsp;&nbsp;&nbsp;
  <a href="https://react.dev/">
    <img src="./svgs/react_dark.svg" alt="React" width="50" height="50">
  </a>
  &nbsp;&nbsp;&nbsp;
  <a href="https://tailwindcss.com/">
    <img src="./svgs/tailwindcss.svg" alt="TailwindCSS" width="50" height="50">
  </a>
  &nbsp;&nbsp;&nbsp;
  <a href="https://www.typescriptlang.org/">
    <img src="./svgs/typescript.svg" alt="TypeScript" width="50" height="50">
  </a>
  &nbsp;&nbsp;&nbsp;
  <a href="https://bun.sh/">
    <img src="./svgs/bun.svg" alt="Bun" width="50" height="50">
  </a>
  &nbsp;&nbsp;&nbsp;
  <a href="https://ui.shadcn.com/">
    <img src="./svgs/shadcn-ui_dark.svg" alt="shadcn/ui" width="50" height="50">
  </a>
  &nbsp;&nbsp;&nbsp;
  <a href="https://biomejs.dev/">
    <img src="./svgs/biomejs.svg" alt="Biome" width="50" height="50">
  </a>
  &nbsp;&nbsp;&nbsp;
  <a href="https://prettier.io/">
    <img src="./svgs/prettier_dark.svg" alt="Prettier" width="50" height="50">
  </a>
  &nbsp;&nbsp;&nbsp;
  <a href="https://eslint.org/">
    <img src="./svgs/eslint.svg" alt="ESLint" width="50" height="50">
  </a>
</div>

---

Plantilla para Astro con shadcn/ui preconfigurado, soporte para React, TailwindCSS y opciones de linting (ESLint + Prettier o Biome). Diseñado para una excelente experiencia de desarrollo (DX).

## Características

- **Astro**: Framework web moderno para sitios estáticos y aplicaciones
- **shadcn/ui**: Componentes hermosos y accesibles preconfigurados
- **TailwindCSS**: Utility-first CSS framework
- **React**: Soporte completo para componentes React
- **Linting opcional**: Configura ESLint + Prettier o Biome según tus preferencias (elegido interactivamente)
- **Tema oscuro/claro**: Sistema de temas completamente implementado
- **CLI interactivo**: Interfaz amigable para configurar tu proyecto
- **Código modular**: Estructura organizada y mantenible

## Instalación y Uso

No necesitas instalar este paquete permanentemente. Simplemente usa `bunx` para ejecutar el asistente de configuración interactivo:

```bash
bunx @hkxdv/astro-shade-dx-template
```

El asistente te guiará para nombrar tu proyecto y seleccionar el tipo de plantilla (Demo o Base) y la preferencia de linter (Biome, ESLint o Ninguno).

## Plantillas disponibles (Elegidas Interactivamente)

- **demo**: Plantilla completa con todos los componentes de shadcn/ui, ejemplos de páginas, sistema de temas y características UI avanzadas.
- **base**: Plantilla mínima con las dependencias esenciales y componentes básicos.

### Opciones de Linter (Elegidas Interactivamente)

- **Biome**: Herramienta única para formateo y linting con rendimiento superior.
- **ESLint + Prettier**: Configuración tradicional con amplia personalización de reglas.
- **Ninguno**: Sin linter configurado.