Prism

Instalação

Instale o Yampi Prism no seu projeto em poucos passos.

Pré-requisitos

  • Node.js 18+
  • Um bundler moderno (Vite, webpack, esbuild, etc.)

Instalação via npm

bash
npm install @yampi/ui

Ou com pnpm:

bash
pnpm add @yampi/ui

Ou com yarn:

bash
yarn add @yampi/ui

Importação

Importe todos os componentes de uma vez:

typescript
import '@yampi/ui';

Ou importe componentes individualmente para tree-shaking:

typescript
import '@yampi/ui/dist/components/button.js';import '@yampi/ui/dist/components/input.js';

Configuração de Tema

O Prism suporta temas light e dark via o atributo data-theme no HTML:

html
<!-- Tema dark (padrão recomendado) --><html data-theme="dark">  ...</html><!-- Tema light --><html data-theme="light">  ...</html>

Para alternar dinamicamente:

javascript
document.documentElement.setAttribute('data-theme', 'dark');

Fontes

O Prism usa Inter para texto e JetBrains Mono para código. Adicione ao seu HTML:

html
<link  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"  rel="stylesheet"/>

Próximos passos

  • Uso básico — Aprenda a usar os componentes
  • Cores — Explore a paleta de cores
  • Componentes — Veja todos os componentes disponíveis