Instalação

Passo a passo para instalar o design system @convertcompany/ui em seu projeto React.

Pré-requisitos

Antes de começar, é necessário ter as seguintes dependências instaladas em seu projeto:

Passo a passo

1
Adicione Tailwind CSS ao seu projeto

Siga o guia de instalação do Tailwind CSS para adicionar a biblioteca ao seu projeto. Você pode encontrar o guia aqui.

2
Instalar o pacote

Adicione a seguinte dependência ao seu projeto

npm install @convertcompany/ui
3
Adicione o preset à configuração do Tailwind

Adicione o preset do @convertcompany/ui ao seu arquivo de configuração tailwind.config.js.

tailwind.config.js
import preset from "@convertcompany/ui/preset"
export default {
    content: [
        ...preset.content,
        "./src/**/*.{js,ts,jsx,tsx}",
    ],
    presets: [preset],
}
4
Adicione o CSS do design system

Adicione o CSS do design system ao seu arquivo src/index.css ou src/App.css.

src/index.css
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    :root {
        --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        --radius: 0.7rem;
        --radius-sm: calc(var(--radius) - 4px);
        --radius-md: calc(var(--radius) - 2px);
        --radius-lg: var(--radius);
        --radius-xl: calc(var(--radius) + 4px);
        --color-background: 255, 255, 255;
        --color-foreground: 18, 18, 18;
        --color-muted-foreground: 107, 114, 128;
        --color-card: 255, 255, 255;
        --color-primary: 31, 169, 97;
        --color-primary-foreground: 255, 255, 255;
        --color-primary-contrast: 30, 136, 70;
        --color-secondary: 242, 242, 242;
        --color-muted: 149, 167, 184;
        --color-border: 232, 232, 235;
        --color-popover: 0, 0, 0;
        --color-popover-foreground: 255, 255, 255;
        --color-ring: var(--color-primary);
        --color-success: 22, 163, 74;
        --color-success-foreground: 255, 255, 255;
        --color-warning: 252, 211, 77;
        --color-warning-foreground: 69, 26, 3;
        --color-danger: 220, 38, 38;
        --color-danger-foreground: 255, 255, 255;
        --color-info: 56, 189, 248;
        --color-info-foreground: 8, 47, 73;
        --color-vertt-muted: 244, 232, 255;
        --color-vertt-lighter: 193, 132, 252;
        --color-vertt-light: 168, 85, 247;
        --color-vertt: 145, 51, 234;
        --color-vertt-dark: 122, 34, 206;
        --color-vertt-darker: 102, 33, 168;
        --color-audio-wave: 227, 227, 229;
        --color-message-sent-background: 223, 252, 214;
        --color-message-sent-foreground: var(--color-foreground);
        --color-message-received-background: 255, 255, 255;
        --color-message-received-foreground: var(--color-foreground);
    }
    .dark {
        --color-background: 05, 08, 11;
        --color-foreground: 255, 255, 255;
        --color-muted-foreground: 183, 185, 189;
        --color-card: 15, 18, 21;
        --color-secondary: 22, 33, 44;
        --color-border: 255, 255, 255, 0.07;
        --color-vertt-muted: 214, 171, 255, 0.1;
        --color-vertt: 168, 85, 247;
        --color-primary: 35, 189, 109;
        --color-primary-foreground: 255, 255, 255;
        --color-primary-contrast: 84, 246, 144;
        --color-muted: 70, 79, 86;
        --color-audio-wave: 31, 38, 41;
        --color-message-received-background: var(--color-muted), 0.4;
        --color-message-received-foreground: 255, 255, 255;
        --color-message-sent-background: 19, 78, 55;
        --color-message-sent-foreground: 255, 255, 255;
    }
}

@layer base {
    * {
        border-color: rgb(var(--color-border));
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    body {
        background-color: rgb(var(--color-background));
        color: rgb(var(--color-foreground));
    }
}

Estilizações opcionais para o scrollbar

:root {
  --scrollbar-thumb: rgba(113, 113, 122, 0.6);
}

[data-theme="dark"],
[class*="dark"] {
  --scrollbar-thumb: rgba(160, 160, 160, 0.4);
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border-radius: 9999px;
  border: 2px solid transparent;
  background-clip: content-box;
}

*::-webkit-scrollbar-track {
  background-color: transparent;
}
5
Pronto!

Agora você já está pronto para utilizar os componentes.

Se você deseja customizar o tema, siga o guia de temas.