@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

Adicione o conteúdo da biblioteca ao seu tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "./node_modules/@musa.tech/design-system/dist/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    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

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

• Table, TableHeader, TableBody, TableRow, TableCell
• DataTable
• 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

🎨 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