Vibra Components Web

Vibra Components Web é um pacote de componentes de interface de usuário reutilizáveis para projetos Vibra Web. Este pacote oferece uma coleção de componentes bem projetados e personalizáveis para ajudar a melhorar a experiência do usuário em seus aplicativos Vibra.

Instalação

Você pode instalar este pacote via npm. Certifique-se de ter o Node.js instalado.

npm install @mesainc/vibra-components-web

Dependências Peer

Esta biblioteca utiliza peer dependencies para reduzir o tamanho do bundle. Você precisa instalar as seguintes dependências no seu projeto:

npm install react react-dom @iconify/react \
  @radix-ui/react-checkbox @radix-ui/react-dialog \
  @radix-ui/react-dropdown-menu @radix-ui/react-popover \
  @radix-ui/react-radio-group @radix-ui/react-select \
  @radix-ui/react-separator @radix-ui/react-slider \
  @radix-ui/react-switch @radix-ui/react-toast \
  @radix-ui/react-tooltip @headlessui/react \
  framer-motion date-fns dayjs lucide-react \
  react-day-picker cmdk input-otp usehooks-ts

Ou usando yarn:

yarn add react react-dom @iconify/react \
  @radix-ui/react-checkbox @radix-ui/react-dialog \
  @radix-ui/react-dropdown-menu @radix-ui/react-popover \
  @radix-ui/react-radio-group @radix-ui/react-select \
  @radix-ui/react-separator @radix-ui/react-slider \
  @radix-ui/react-switch @radix-ui/react-toast \
  @radix-ui/react-tooltip @headlessui/react \
  framer-motion date-fns dayjs lucide-react \
  react-day-picker cmdk input-otp usehooks-ts

Estilos

Para a folha de estilo funcionar, é necessário importar o CSS na raiz do seu projeto:

import '@mesainc/vibra-components-web/dist/styles.css'

Uso

import { Button, Input, Calendar } from '@mesainc/vibra-components-web'

function App() {
  return (
    <div>
      <Button>Clique aqui</Button>
      <Input label="Nome" />
      <Calendar />
    </div>
  )
}