ivt v0.0.3

ivt

Uma biblioteca de componentes React da Investtools com suporte a Tailwind CSS e ícones SVG customizados.

Índice

• Instalação
• Pré-requisitos
• Uso
• Configuração do Tailwind CSS

Instalação

Instale a biblioteca via npm:

npm install ivt

Certifique-se de que as dependências necessárias estejam instaladas no seu projeto:

npm install react@^19.0.0 react-dom@^19.0.0

Pré-requisitos

• React: Versão 19 ou superior.
• Tailwind CSS (opcional): Para usar os estilos fornecidos pela biblioteca, configure o Tailwind no seu projeto (veja Configuração do Tailwind CSS (#configuração-do-tailwind-css)).

Uso

A biblioteca exporta componentes que podem ser importados diretamente. Confira eles abaixo:

Storybook

Configuração do Tailwind CSS

A biblioteca usa Tailwind CSS para estilizar os componentes. Para garantir que os estilos funcionem e o IntelliSense do Tailwind no VSCode reconheça as classes customizadas, configure o Tailwind no seu projeto.

Instalação TailwindCSS

Passo 1: Instale o Tailwind

npm install tailwindcss @tailwindcss/vite

Passo 2: Configurar o plugin Vite

vite.config.ts

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
})

Passo 3: Importar Tailwind CSS

index.css

@import "tailwindcss";

Passo 4: Inclua os Estilos

main.tsx

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { App } from "./App.tsx";

import "ivt/index.css";
import "./globals.css";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <App />
  </StrictMode>
);

Passo 5: Usando o pacote

App.tsx

import { Button } from "ivt/button";

export function App() {
  return (
    <div>
      <Button>Investtools</Button>
    </div>
  );
}
);

Passo 6: Inicie seu processo de construção

npm run dev