Next-Tauri-Starter Tailwind Templates

Next Tauri Starter

🚀 Un boilerplate moderno para aplicaciones de escritorio usando Tauri + Next.js 14 + Tailwind CSS + shadcn/ui Perfecto para crear apps de escritorio livianas, seguras y rápidas utilizando tecnologías web.

đź§Ş create-next-tauri

🚀 Crea aplicaciones de escritorio modernas con Tauri + Next.js 14 + Tailwind CSS + shadcn/ui con un solo comando
Perfecto para iniciar apps de escritorio livianas, seguras y rápidas utilizando tecnologías web.

✨ Características

  • 🚀 InstalaciĂłn con un solo comando - Comienza en segundos, no en horas
  • ⚙️ ConfiguraciĂłn cero - Todo pre-configurado para empezar a desarrollar inmediatamente
  • 🔄 Desarrollo en tiempo real - Hot reloading para una experiencia de desarrollo fluida
  • 🌗 Modo oscuro - Sistema de temas claro/oscuro listo para usar
  • đź§© Componentes reutilizables - Construido con shadcn/ui para una UI consistente
  • 📱 Responsivo - Diseñado para verse bien en cualquier tamaño de pantalla
  • 🛠️ TypeScript - Tipado completo para una experiencia de desarrollo robusta

📦 Stack Tecnológico

  • ⚡ Next.js 14 – App Router, Server Components y optimizaciĂłn por defecto
  • 🦀 Tauri – Motor de apps de escritorio sĂşper liviano y seguro
  • đź’¨ Tailwind CSS – Styling utility-first con control total
  • đź§± shadcn/ui – Componentes hermosos y accesibles usando Radix UI
  • 🌗 Dark Mode – Toggle de tema claro/oscuro listo para usar
  • 🔄 Estado Global – Sistema de gestiĂłn de estado configurado y listo

🚀 Inicio Rápido

CreaciĂłn de un nuevo proyecto

# Crea una nueva aplicaciĂłn con un solo comando
npx create-next-tauri mi-app

# Navega al directorio del proyecto
cd mi-app

# Inicia el servidor de desarrollo
npm run tauri dev

¡Eso es todo! Tu nueva aplicación Tauri + Next.js estará funcionando en segundos.

đź§° Requisitos Previos

Antes de usar create-next-tauri, asegĂşrate de tener instalado:

đź“‹ Estructura del Proyecto

mi-app/
├── src/                  # Código fuente de Tauri (Rust)
│   ├── main.rs           # Punto de entrada de Rust
│   └── ...
├── src-tauri/            # Configuración de Tauri
│   ├── tauri.conf.json   # Configuración principal de Tauri
│   └── ...
├── app/                  # Componentes de Next.js
│   ├── page.tsx          # Página principal
│   ├── layout.tsx        # Layout principal
│   └── ...
├── components/           # Componentes React reutilizables
│   ├── ui/               # Componentes de interfaz de usuario (shadcn/ui)
│   └── ...
├── lib/                  # Utilidades y helpers
├── styles/               # Estilos globales
└── public/               # Archivos estáticos

🛠️ Scripts Disponibles

  • npm run tauri dev - Inicia el servidor de desarrollo de Next.js y Tauri
  • npm run tauri build - Compila la aplicaciĂłn para producciĂłn
  • npm run dev - Inicia solo el servidor de desarrollo de Next.js
  • npm run build - Compila solo la parte web de la aplicaciĂłn
  • npm run lint - Ejecuta el linter para verificar la calidad del cĂłdigo

⚙️ Personalización

ConfiguraciĂłn de Tauri

Puedes personalizar la configuraciĂłn de Tauri editando el archivo src-tauri/tauri.conf.json:

{
  "build": {
    "beforeBuildCommand": "npm run build",
    "beforeDevCommand": "npm run dev",
    "devPath": "http://localhost:3000",
    "distDir": "../out"
  },
  "package": {
    "productName": "Mi AplicaciĂłn",
    "version": "0.1.0"
  },
  // ... más configuraciones
}

Componentes UI

Este starter utiliza shadcn/ui, que proporciona componentes hermosos y personalizables. Puedes añadir más componentes con:

npx shadcn-ui@latest add button
npx shadcn-ui@latest add card
# etc.

📚 Ejemplos Incluidos

El starter incluye ejemplos de:

  • ImplementaciĂłn de tema claro/oscuro
  • ComunicaciĂłn entre Rust y JavaScript
  • Uso de componentes shadcn/ui
  • Layouts responsivos con Tailwind CSS

🤝 Contribuir

¡Las contribuciones son bienvenidas! Si tienes alguna sugerencia, problema o mejora:

  1. Haz fork del repositorio
  2. Crea una rama para tu feature (git checkout -b feature/amazing-feature)
  3. Haz commit de tus cambios (git commit -m 'feat: add amazing feature')
  4. Push a la rama (git push origin feature/amazing-feature)
  5. Abre un Pull Request

đź“„ Licencia

Distribuido bajo la licencia MIT. Ver LICENSE para más información.

👏 Agradecimientos


Creado con ❤️ por Pietro923

Reportar Bug · Solicitar Feature

Top categories

Loading Svelte Themes