@musa.tech/design-system

Design System da Musa.tech baseado em React, TypeScript, Tailwind CSS e Radix UI. Uma coleção completa de componentes reutilizáveis e acessíveis para criar interfaces modernas.

📦 Instalação

npm install @musa.tech/design-system

ou

yarn add @musa.tech/design-system

ou

pnpm add @musa.tech/design-system

ou

bun add @musa.tech/design-system

🎨 Configuração

1. Importe o CSS

Adicione o CSS da biblioteca no seu arquivo principal (ex: main.tsx ou App.tsx):

import "@musa.tech/design-system/styles.css";

2. Configure o Tailwind CSS (RECOMENDADO)

Para ter autocomplete completo de todas as cores e classes do Tailwind, use o preset:

// tailwind.config.ts
import type { Config } from "tailwindcss";
import musaPreset from "@musa.tech/design-system/tailwind.preset";

export default {
  presets: [musaPreset],
  content: [
    "./src/**/*.{ts,tsx}",
    "./node_modules/@musa.tech/design-system/dist/**/*.{js,cjs}",
  ],
  // Suas customizações adicionais aqui
} satisfies Config;

3. Autocomplete de Variáveis CSS (Opcional)

Para autocomplete de variáveis CSS em style props:

// src/types/global.d.ts ou src/vite-env.d.ts
import "@musa.tech/design-system/css-variables";

📖 Para instruções detalhadas, consulte o arquivo INSTALLATION.md

extend: {},

}, plugins: [require("tailwindcss-animate")], };

### 3. Dependências Peer

Certifique-se de ter as seguintes dependências instaladas no seu projeto:

- `react` ^18.3.1
- `react-dom` ^18.3.1
- `tailwindcss` ^3.4.0
- `tailwindcss-animate` ^1.0.7

## 🚀 Uso

```typescript
import { Button, Card, CardContent, Input } from "@musa.tech/design-system";

function App() {
  return (
    <Card>
      <CardContent>
        <h1>Olá, Musa.tech!</h1>
        <Input placeholder="Digite algo..." />
        <Button>Clique aqui</Button>
      </CardContent>
    </Card>
  );
}

📚 Componentes Disponíveis

A biblioteca inclui os seguintes componentes:

Layout

• Card, CardHeader, CardContent, CardFooter
• Sheet, SheetTrigger, SheetContent
• Sidebar, SidebarProvider, SidebarContent
• ScrollArea, ScrollBar
• ResizablePanel, ResizablePanelGroup
• Separator
• AspectRatio

Formulários

• Button
• Input
• Textarea
• Checkbox
• RadioGroup, RadioGroupItem
• Switch
• Select, SelectTrigger, SelectContent, SelectItem
• Slider
• Form, FormField, FormItem, FormLabel
• Label
• InputOTP

Navegação

• NavigationMenu, NavigationMenuItem
• Menubar, MenubarMenu, MenubarTrigger
• Breadcrumb, BreadcrumbItem, BreadcrumbLink
• Pagination, PaginationContent, PaginationItem
• Tabs, TabsList, TabsTrigger, TabsContent

Feedback

• Alert, AlertTitle, AlertDescription
• Toast, Toaster, useToast
• Sonner
• Progress
• Skeleton
• Badge

Overlays

• Dialog, DialogTrigger, DialogContent
• AlertDialog, AlertDialogTrigger, AlertDialogContent
• Drawer, DrawerTrigger, DrawerContent
• Popover, PopoverTrigger, PopoverContent
• HoverCard, HoverCardTrigger, HoverCardContent
• Tooltip, TooltipProvider, TooltipTrigger, TooltipContent
• ContextMenu, ContextMenuTrigger, ContextMenuContent
• DropdownMenu, DropdownMenuTrigger, DropdownMenuContent

Data Display

• DataTable, DataTableHeader, DataTableBody, DataTableRow, DataTableHead, DataTableCell (always use this — never use Table)
• Avatar, AvatarImage, AvatarFallback
• Calendar
• Carousel, CarouselContent, CarouselItem
• Chart, ChartContainer, ChartTooltip
• Text

Utilitários

• Accordion, AccordionItem, AccordionTrigger, AccordionContent
• Collapsible, CollapsibleTrigger, CollapsibleContent
• Command, CommandInput, CommandList, CommandItem
• Toggle, ToggleGroup, ToggleGroupItem

Hooks

• useToast - Gerenciamento de notificações toast
• useIsMobile - Detecção de dispositivos móveis
• useSidebar - Controle da sidebar

Utilitários

• cn - Função para mesclar classes CSS com suporte a Tailwind

🤖 Claude Code Skill

O pacote inclui uma skill para Claude Code que instrui o agente a usar os componentes, tokens e padrões do design system automaticamente — sem precisar explicar a cada conversa.

A skill é invocada automaticamente pelo Claude ao detectar que o projeto usa @musa.tech/design-system. Ela cobre:

• Quais componentes usar para cada caso de uso
• Como configurar o Tailwind preset e CSS variables
• Tokens de cor, tipografia e bordas
• Anti-patterns a evitar
• Exemplos prontos de formulários, tabelas, modais, toasts, etc.

Instalando a skill no seu projeto

Após instalar o pacote, copie a skill para o diretório .claude/ do seu projeto:

# Opção 1 — script incluído no pacote (rode no seu projeto)
npx [email protected]/design-system npm run install-skill

# Opção 2 — cópia manual
cp -r node_modules/@musa.tech/design-system/.claude/skills/musa-design-system .claude/skills/

Crie a pasta .claude/skills/ se ela não existir:

mkdir -p .claude/skills
cp -r node_modules/@musa.tech/design-system/.claude/skills/musa-design-system .claude/skills/

Após isso, o Claude Code vai usar o design system corretamente em qualquer tarefa de UI no projeto.

🎨 Customização

Todos os componentes são totalmente customizáveis via Tailwind CSS. Use a prop className para aplicar estilos personalizados:

<Button className="bg-purple-600 hover:bg-purple-700">Botão Customizado</Button>

🔧 Desenvolvimento

# Instalar dependências
npm install

# Modo desenvolvimento
npm run dev

# Build como biblioteca (para publicar no npm)
BUILD_LIB=true npm run build

# Build como aplicação (para publicar no Lovable)
npm run build

# Lint
npm run lint

Build Modes

Este projeto suporta dois modos de build:

1. Biblioteca (Library Mode): Para publicar no npm

   • Use BUILD_LIB=true npm run build
   • Gera arquivos ESM e CJS em dist/
   • Inclui arquivos de tipagem TypeScript

2. Aplicação (App Mode): Para publicar no Lovable

   • Use npm run build
   • Gera uma aplicação web completa
   • Inclui todos os assets e páginas de demonstração

📄 Licença

MIT © Musa.tech

🤝 Contribuindo

Contribuições são bem-vindas! Por favor, abra uma issue ou pull request no repositório.

📮 Contato

Para dúvidas ou suporte, entre em contato com a equipe Musa.tech.

The only requirement is having Node.js & npm installed - install with nvm

Follow these steps:

# Step 1: Clone the repository using the project's Git URL.
git clone <YOUR_GIT_URL>

# Step 2: Navigate to the project directory.
cd <YOUR_PROJECT_NAME>

# Step 3: Install the necessary dependencies.
npm i

# Step 4: Start the development server with auto-reloading and an instant preview.
npm run dev

Edit a file directly in GitHub

• Navigate to the desired file(s).
• Click the "Edit" button (pencil icon) at the top right of the file view.
• Make your changes and commit the changes.

Use GitHub Codespaces

• Navigate to the main page of your repository.
• Click on the "Code" button (green button) near the top right.
• Select the "Codespaces" tab.
• Click on "New codespace" to launch a new Codespace environment.
• Edit files directly within the Codespace and commit and push your changes once you're done.

What technologies are used for this project?

This project is built with:

• Vite
• TypeScript
• React
• Tailwind CSS

How can I deploy this project?

Simply open Lovable and click on Share -> Publish.

Can I connect a custom domain to my Lovable project?

Yes, you can!

To connect a domain, navigate to Project > Settings > Domains and click Connect Domain.

Read more here: Setting up a custom domain