MT Design System

Sistema de design para aplicações Mundo Transparente. Inclui tokens de design, componentes React reutilizáveis e preset do Tailwind CSS.

Instalação

Instale o pacote no seu projeto:

pnpm add @mt/design-system

Configuração do Tailwind

Configure o preset no seu tailwind.config.ts:

import type { Config } from 'tailwindcss'
import mtPreset from '@mt/design-system/preset'


const config: Config = {
  presets: [mtPreset],
  content: [
    './src/**/*.{js,ts,jsx,tsx,mdx}',
    './node_modules/@mt/design-system/**/*.{js,ts,jsx,tsx}',
  ],
}


export default config

Importar Tokens CSS

Importe os tokens CSS no seu arquivo principal:

import '@mt/design-system/tokens'
import '@mt/design-system/animations'

Usar Componentes

Importe e use os componentes:

import { Button, Card, Input } from '@mt/design-system'


function App() {
  return (
    <Card>
      <Input placeholder="Digite algo..." />
      <Button variant="primary">Enviar</Button>
    </Card>
  )
}

Estrutura

  • •Tokens: Cores, espaçamentos, sombras e animações do sistema
  • •Preset: Configuração do Tailwind CSS com os tokens
  • •Componentes: Componentes React pré-estilizados e reutilizáveis