@atomsix/ui

Design System (React + Tailwind) da Atomsix com zero configuraçã4. Use os componentes:

import { Button } from '@atomsix/ui';

function MyComponent() {
  return (
    <div>
      <Button variant="primary">Clique Aqui</Button>
    </div>
  );
}

Solução de Problemas

Se você encontrar erros como AtomProvider is not defined ou problemas com estilos, consulte nosso Guia de Solução de Problemas.

@atomsix/ui

Design System (React + Tailwind) da Atomsix com zero configuração necessária.

Nova versão 2.0.4! Esta versão resolve problemas de importação com o AtomProvider e adiciona um componente de fallback. Veja abaixo como migrar.

Instalação

npm install @atomsix/ui
# ou
yarn add @atomsix/ui
# ou
pnpm add @atomsix/ui

Uso Rápido (Zero Config)

1. Adicione o Provider na raiz da sua aplicação:

// Opção 1: Use o AtomProvider padrão
import { AtomProvider } from '@atomsix/ui';

// Opção 2: Se tiver problemas, use o provider de fallback
// import { AtomProvider } from '@atomsix/ui/fallback';

function App() {
  return (
    <AtomProvider>
      {/* Seu conteúdo aqui */}
    </AtomProvider>
  );
}

2. Configure o Tailwind (uma única vez):

Para Tailwind CSS 3.x (Com arquivo de configuração)

// tailwind.config.js
module.exports = {
  // ...outras configurações
  plugins: [
    require('@atomsix/ui/plugin'),
    // ...outros plugins
  ],
}

Para Tailwind CSS 4.x com Vite

// vite.config.js ou vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'
import atomsixPlugin from '@atomsix/ui/plugin'

export default defineConfig({
  plugins: [
    react(),
    tailwindcss({
      // Aplique o plugin da @atomsix/ui aqui
      config: {
        plugins: [atomsixPlugin],
      }
    }),
  ],
})

3. Uso Manual Alternativo (Se os estilos não aparecerem corretamente):

Se você encontrar problemas com os estilos, adicione diretamente o CSS:

// Na sua aplicação principal
import '@atomsix/ui/components.css';

4. Use os componentes:

import { Button, Modal } from '@atomsix/ui';

function MyComponent() {
  return (
    <div>
      <Button variant="primary">Clique Aqui</Button>
    </div>
  );
}

Configuração Manual (Opcional)

Para projetos que precisam de mais controle, você também pode:

• Importar o preset diretamente: require('@atomsix/ui/tailwind.preset')
• Importar os estilos CSS: import '@atomsix/ui/styles.css'

Veja os tokens em styles.css e o preset em tailwind.preset.js.

Migrando da Versão Anterior

Se você estava usando a versão anterior do @atomsix/ui, aqui estão as principais diferenças:

1. Não é mais necessário importar o CSS manualmente
2. Não é mais necessário configurar o preset do Tailwind diretamente
3. Novo componente: AtomProvider deve ser adicionado na raiz da aplicação

Passos para Migração:

1. Atualize para a nova versão:

npm install @atomsix/ui@latest

2. Substitua a configuração antiga do Tailwind:

Para Tailwind CSS 3.x:

// Antes
module.exports = {
  presets: [require('@atomsix/ui/tailwind.preset')],
}

// Agora
module.exports = {
  plugins: [require('@atomsix/ui/plugin')],
}

Para Tailwind CSS 4.x com Vite:

// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'
import atomsixPlugin from '@atomsix/ui/plugin'

export default defineConfig({
  plugins: [
    react(),
    tailwindcss({
      config: {
        plugins: [atomsixPlugin],
      }
    }),
  ],
})

3. Adicione o Provider na raiz da aplicação:

import { AtomProvider } from '@atomsix/ui';

function App() {
  return (
    <AtomProvider>
      {/* Seu conteúdo aqui */}
    </AtomProvider>
  );
}

4. Remova as importações CSS manuais (não são mais necessárias):

// Remova esta linha, não é mais necessária:
import '@atomsix/ui/styles.css';