Prism
Design System v0.1

O sistema de design para
experiências extraordinárias

47 Web Components prontos para uso. Tema light e dark. Framework-agnostic. Construído para o ecossistema Yampi.

Explorar ComponentesComeçar

47 Componentes

De botões a calendários — tudo que você precisa para construir interfaces completas de e-commerce.

Light & Dark

Tema completo com CSS Custom Properties. Alterne entre light e dark com um atributo.

Framework Agnostic

Web Components nativos. Funciona com React, Vue, Angular, Svelte ou HTML puro.

Componentes prontos para produção

Cada componente é acessível, customizável e pronto para uso em qualquer framework.

Primário
Secundário
Outline
Button
NovoPagoPendenteCancelado
Badge
Camiseta Yampi...
Input
Resumo do pedido
Pedido #1234
R$ 299,90
Card
Sucesso
Pedido criado com sucesso!
Alert
PedidoStatusTotal
#1234PagoR$ 299
#1235PendenteR$ 149
Table
Ver todos os 47 componentes

Design Tokens

CSS Custom Properties para cores, tipografia e espaçamento — consistência em todas as interfaces.

Semânticas

Primary
Destructive
Success
Warning
Info

Greyscale

Black
700
600
500
300
200
50
05

Tipografia

DisplayYampi Prism
HeadingDesign System
TitleComponentes prontos
BodyTexto padrão para conteúdo e parágrafos.
SmallTexto menor para captions e labels.
Codeconst theme = 'dark'

Comece em minutos

Instale o pacote e comece a usar os componentes imediatamente.

bash
npm install @yampi/ui
html
<script type="module">  import '@yampi/ui';</script><y-button variant="primary">  Adicionar ao carrinho</y-button>
Ver guia completo