Mri UI

!CI
!NPM Version

Biblioteca oficial de componentes de UI para o ecossistema Mri.

Desenhada para ser moderna, responsiva e com suporte nativo a temas escuros (Dark Mode), utilizando React, Tailwind CSS, Radix UI e seguindo a arquitetura do shadcn/ui.

🚀 Como usar

Você pode utilizar esta biblioteca de duas formas principais:

$3

Ideal se você quer apenas usar os componentes prontos e receber atualizações automáticas.

``bash
pnpm add @mriqbox/ui-kit


ou


npm install @mriqbox/ui-kit
`

Uso:
`tsx
import { MriButton } from '@mriqbox/ui-kit';

export default function MyComponent() {
return Clique aqui;
}
`

$3

Ideal se você quer ter o código dos componentes no seu projeto para customizá-los livremente ("Own your UI").

Este projeto contém um arquivo components.json na raiz, permitindo o uso da CLI do shadcn.

Adicionar componente via CLI (Novo):
Você pode adicionar componentes individualmente (estilo Shadcn) direto do nosso repositório:

`bash
npx @mriqbox/ui-kit add mri-button
`
Isso irá baixar o código fonte do MriButton.tsx para src/components/ui/MriButton.tsx (ou diretório configurado, se detectado).

Nota: A CLI irá baixar apenas o arquivo do componente. Verifique se ele possui dependências de outros componentes Mri* e adicione-os também se necessário.

⚙️ Configuração (Para uso via NPM)

Se você instalou via NPM, precisa configurar seu projeto para carregar os estilos corretamente.

$3


Adicione no seu arquivo de entrada (ex: main.tsx ou App.tsx):
`tsx
import '@mriqbox/ui-kit/dist/style.css';
`

$3

No seu tailwind.config.js, adicione o caminho da biblioteca para o content:

`js
module.exports = {
content: [
"./src/*/.{ts,tsx}",
"./node_modules/@mriqbox/ui-kit/dist/*/.{js,mjs}" // <--- Adicione esta linha
],
// ...
}
`

📚 Documentação

Para ver todos os componentes disponíveis e suas propriedades, consulte nosso Storybook:
Acessar Storybook

🛠️ Desenvolvimento Local

1. Clone o repositório.
2. Instale dependências: pnpm install
3. Inicie o Storybook: pnpm storybook`