open-index/open-npm huggingface dataset:
npm package: @instivo-ds/react
Description: instivo-design-system-package
Latest version: 1.19.0

<div align="center">
    <img src="../../apps/docs/public/assets/logo.png" />
</div>
</br>
<h1 align="center">Design System</h1>
</br>
</br>

## 🫧 @instivo-ds

Com o objetivo de uniformizar a identidade visual da _Instivo_ e acelerar o tempo de desenvolvimento dos projetos, foi criado este monorepo, que contempla os seguintes pacotes:

- 📦 @instivo-ds/react - Pacote contendo os componentes de ui para projetos **React**
- 🎨 @instivo-ds/tokens - Pacote contendo os tokens que servem de base ao _Design System_
- 🛠️ @instivo-ds/eslint-config - Pacote contendo configuração de acordo com o style guide da _Instivo_
- ⚒️ @instivo-ds/ts-config - Pacote operacional, que oferece configuração ao _TypeScript_

####

#### Mas por quê utilizar a biblioteca de componentes?

🦾 Todos os componentes são integralmente escritos em TypeScript

####

🧪 Todos os componentes são testados dentro do seu escopo

####

💫 Todos os componentes base, foram confeccionados à partir de componentes `HTML` nativos

####

♿ Todos os componentes dentro do su escopo utilizam as feature de **A11Y** necessárias, podendo receber atributos complementares dentro do escopo de utilização, conforme o guia de padrões da [W3](https://www.w3.org/WAI/ARIA/apg/patterns/).

####

## Como instalar e utilizar

📦 Para utilizar a biblioteca de componentes numa aplicação **React**

1. Instale a biblioteca:

```
$  npm i @instivo-ds/react
```

2. Faça um extensão dos estilos, no arquivo que envolva toda sua aplicação:

```javascript
// Em aplicações que utilizam Next.js@13 seria o arquivo `layout.tsx`
// Em aplicações que utilizam Vite seria o arquivo `main.tsx`

import "@instivo-ds/react/dist/output.css"
```

3. Você já pode uilizar os componentes, conforme o exemplo à seguir:

```javascript
import { UiTypography } from "@instivo-ds/react"

export function App() {
  return <UiTypography>Sample</UiTypography>
}
```

#### :globe_with_meridians: Você pode encontrar uma lista completa dos componentes e como utilizar na nossa [documentação](https://64ece78dfa8d7286a086894a-susnxzweku.chromatic.com/)