Shadcn Roit Theme

🎨 Descrição

O Shadcn Roit Theme é um design system customizado baseado no shadcn/ui v5, especialmente criado para projetos Lovable.dev. Este tema oferece uma experiência visual consistente e moderna com suporte completo aos modos claro e escuro.

✨ Características

• 🎯 Baseado no shadcn/ui v5 - Compatível com a versão mais recente
• 🌗 Modo claro e escuro - Suporte completo para ambos os temas
• 🎨 Design customizado - Tema roit com paleta de cores única
• 📱 Responsivo - Funciona perfeitamente em todos os dispositivos
• 🚀 Fácil instalação - Script de instalação automática
• 💼 Lovable.dev ready - Otimizado para projetos Lovable

📦 Instalação

npm

npm install @mauriciodeoliveirasouza/shadcn-roit-theme

yarn

yarn add @mauriciodeoliveirasouza/shadcn-roit-theme

pnpm

pnpm add @mauriciodeoliveirasouza/shadcn-roit-theme

🚀 Configuração Automática

O pacote inclui um script de instalação que configura automaticamente:

• ✅ Importa os estilos CSS do tema
• ✅ Atualiza o components.json
• ✅ Verifica configurações do Tailwind CSS

📖 Como Usar

1. Configuração Básica

Após a instalação, adicione as classes do tema ao elemento raiz da sua aplicação:

// app.tsx ou layout.tsx
export default function App() {
  return (
    <div className="theme-roit theme-container">
      {/* Seu conteúdo aqui */}
    </div>
  );
}

2. Com modo escuro

// Para alternar entre modos claro e escuro
export default function App() {
  const [isDark, setIsDark] = useState(false);
  
  return (
    <div className={`${isDark ? 'dark' : ''} theme-roit theme-container`}>
      {/* Seu conteúdo aqui */}
    </div>
  );
}

3. Importando Componentes

import { 
  Button, 
  Card, 
  CardContent, 
  CardHeader, 
  CardTitle,
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue
} from '@mauriciodeoliveirasouza/shadcn-roit-theme';

export default function MyComponent() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Meu Card com Tema Roit</CardTitle>
      </CardHeader>
      <CardContent>
        <Button>Botão Customizado</Button>
        <Select>
          <SelectTrigger>
            <SelectValue placeholder="Selecione..." />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="1">Opção 1</SelectItem>
            <SelectItem value="2">Opção 2</SelectItem>
          </SelectContent>
        </Select>
      </CardContent>
    </Card>
  );
}

🎨 Componentes Disponíveis

O tema roit inclui todos os componentes do shadcn/ui customizados:

• Formulários: Button, Input, Label, Textarea, Checkbox, RadioGroup, Select, Switch
• Layout: Card, Container, Separator, AspectRatio
• Navegação: NavigationMenu, Breadcrumb, Pagination, Tabs
• Feedback: Alert, Progress, Skeleton, Sonner
• Overlays: Dialog, Sheet, Popover, HoverCard, Tooltip
• Data Display: Table, Badge, Avatar, Calendar
• E muito mais...

🎯 Para Projetos Lovable.dev

Configuração no Lovable

1. Instale o pacote no seu projeto Lovable
2. Adicione as classes do tema no componente raiz (src/App.tsx):

import { Toaster } from "@/components/ui/sonner";
import { TooltipProvider } from "@/components/ui/tooltip";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Index from "./pages/Index";

const queryClient = new QueryClient();

const App = () => (
  <QueryClientProvider client={queryClient}>
    <TooltipProvider>
      <Toaster />
      <BrowserRouter>
        <div className="theme-roit theme-container">
          <Routes>
            <Route path="/" element={<Index />} />
          </Routes>
        </div>
      </BrowserRouter>
    </TooltipProvider>
  </QueryClientProvider>
);

export default App;

🛠️ Configuração Manual (se necessário)

CSS Global

Se a instalação automática não funcionar, adicione manualmente ao seu arquivo CSS global:

@import "@mauriciodeoliveirasouza/shadcn-roit-theme/styles/roit-theme.css";

Tailwind Config

Certifique-se de que o modo escuro está configurado como class:

// tailwind.config.js
module.exports = {
  darkMode: 'class',
  // resto da configuração
}

🎨 Customização

Classes CSS Disponíveis

/* Tema base */
.theme-roit { /* Tema roit */ }
.theme-container { /* Container do tema */ }

/* Modos */
.dark .theme-roit { /* Modo escuro */ }

/* Estados dos componentes */
.theme-roit [data-slot="button"] { /* Botões */ }
.theme-roit [data-slot="select-item"] { /* Itens de select */ }
.theme-roit [data-slot="alert"] { /* Alertas */ }

Variáveis CSS

O tema usa variáveis CSS customizáveis:

:root {
  --radius: 0.625rem;
  --primary: oklch(0 0 0);
  --secondary: oklch(0.97 0 0);
  /* ... outras variáveis */
}

📱 Exemplo Completo

import React, { useState } from 'react';
import { 
  Button, 
  Card, 
  CardContent, 
  CardHeader, 
  CardTitle,
  Switch,
  Label
} from '@mauriciodeoliveirasouza/shadcn-roit-theme';

export default function ExampleApp() {
  const [isDark, setIsDark] = useState(false);

  return (
    <div className={`min-h-screen ${isDark ? 'dark' : ''} theme-roit theme-container`}>
      <div className="container mx-auto p-8">
        <Card className="max-w-md mx-auto">
          <CardHeader>
            <CardTitle>Tema Roit Demo</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="flex items-center space-x-2">
              <Switch 
                id="dark-mode" 
                checked={isDark}
                onCheckedChange={setIsDark}
              />
              <Label htmlFor="dark-mode">Modo escuro</Label>
            </div>
            <Button className="w-full">
              Botão com tema roit
            </Button>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}

🤝 Contribuindo

Contribuições são bem-vindas! Por favor:

1. Faça um fork do projeto
2. Crie uma branch para sua feature (git checkout -b feature/AmazingFeature)
3. Commit suas mudanças (git commit -m 'Add some AmazingFeature')
4. Push para a branch (git push origin feature/AmazingFeature)
5. Abra um Pull Request

📄 Licença

Este projeto está licenciado sob a Licença MIT - veja o arquivo LICENSE para detalhes.

👨‍💻 Autor

Mauricio de Oliveira Souza

• GitHub: @mauriciodeoliveirasouza
• Email: [email protected]

🙏 Agradecimentos

• shadcn/ui pela base incrível
• Radix UI pelos componentes primitivos
• Tailwind CSS pelo sistema de design
• Lovable.dev pela inspiração

⭐️ Se este projeto te ajudou, considere dar uma estrela no GitHub!