Uso

Carregue os estilos uma vez

import '@onblide/ui/styles.css';

Isso traz os tokens (--ob-*), as fontes Poppins, Playfair Display e JetBrains Mono, e os ícones do Phosphor.

Use os componentes

import { Button, Input, Icons } from '@onblide/ui';

export function Formulario() {
  return (
    <form>
      <Input label="E-mail" type="email" placeholder="voce@empresa.com" />
      <Button kind="primary" icon={<Icons.check size={16} />}>Salvar</Button>
    </form>
  );
}

Exemplo ao vivo (edite o código):

Carregando…

Tema claro e escuro

O tema é controlado pelo atributo data-theme e o padrão é o claro. Para escolher entre claro, escuro e sistema, guardar a preferência e evitar o flash no carregamento, use o themeManager e o useTheme(): veja Tema.

Nesta documentação, o botão de tema no topo troca o tema pelo Docusaurus, então os exemplos acompanham.

Cores e medidas sempre por token

Nunca escreva o valor solto: use var(--ob-blue), var(--ob-r-md) e afins. Veja todos em Fundações.