Uso básico

<script type="module">  import '@yampi/ui';</script><!-- Botão simples --><y-button>Clique aqui</y-button><!-- Botão com variante --><y-button variant="secondary">Cancelar</y-button><!-- Input com label --><y-input label="Nome" placeholder="Digite seu nome"></y-input>

import '@yampi/ui';function ProductForm() {  return (    <div>      <y-input label="Nome do produto" placeholder="Ex: Camiseta"></y-input>      <y-textarea label="Descrição" rows="4"></y-textarea>      <y-button variant="default">Salvar produto</y-button>    </div>  );}

// vite.config.tsexport default defineConfig({  plugins: [    vue({      template: {        compilerOptions: {          isCustomElement: (tag) => tag.startsWith('y-'),        },      },    }),  ],});

<template>  <y-card>    <div slot="header">      <h3>Pedido #1234</h3>    </div>    <div slot="content">      <p>Total: R$ 299,90</p>    </div>    <div slot="footer">      <y-button @click="confirmar">Confirmar pedido</y-button>    </div>  </y-card></template>

<!-- Slot padrão --><y-button>Texto do botão</y-button><!-- Slots nomeados --><y-card>  <div slot="header">Cabeçalho</div>  <div slot="content">Conteúdo</div>  <div slot="footer">Rodapé</div></y-card>

<!-- Atributos string --><y-button variant="destructive" size="lg">Excluir</y-button><!-- Atributos boolean --><y-button disabled>Desabilitado</y-button><y-button loading>Carregando...</y-button><!-- Via JavaScript --><script>  const button = document.querySelector('y-button');  button.variant = 'secondary';  button.loading = true;</script>

<y-button onclick="alert('Clicou!')">Clique</y-button><y-input id="nome"></y-input><script>  document.getElementById('nome').addEventListener('input', (e) => {    console.log('Valor:', e.target.value);  });</script>