Wavy Divider — Sinapse Design System

Em cada stack

HTML e Astro: Classes itps-* do CSS Sinapse, com todas as variantes desta página.
React e Vue: Componentes padrão do shadcn (separator) com o tema Sinapse: cores, fonte e raio vêm do tema, e as variantes itps-* desta página existem só no HTML.

import { Separator } from '@/components/ui/separator'

export function DividerExample() {
  return (
    <div className="grid gap-6">
      <section>
        <h3 className="text-lg font-semibold">Fundamentos</h3>
        <p className="text-sm text-muted-foreground">
          Layout, grid e movimento para compor a página.
        </p>
      </section>

      <Separator className="my-8" />

      <section>
        <h3 className="text-lg font-semibold">Componentes</h3>
        <p className="text-sm text-muted-foreground">
          Contratos visuais prontos para copiar e adaptar.
        </p>
      </section>
    </div>
  )
}

<script setup lang="ts">
import { Separator } from '@/components/ui/separator'
</script>

<template>
  <div class="grid gap-6">
    <section>
      <h3 class="text-lg font-semibold">Fundamentos</h3>
      <p class="text-sm text-muted-foreground">
        Layout, grid e movimento para compor a página.
      </p>
    </section>

    <Separator class="my-8" />

    <section>
      <h3 class="text-lg font-semibold">Componentes</h3>
      <p class="text-sm text-muted-foreground">
        Contratos visuais prontos para copiar e adaptar.
      </p>
    </section>
  </div>
</template>

<div class="itps-wavy-divider" aria-hidden="true">
  <svg width="100%" height="8" fill="none" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <pattern id="itps-wavy-divider-pattern" width="91" height="8" patternUnits="userSpaceOnUse">
        <path d="M114 4c-5.067 4.667-10.133 4.667-15.2 0S88.667-.667 83.6 4 73.467 8.667 68.4 4 58.267-.667 53.2 4 43.067 8.667 38 4 27.867-.667 22.8 4 12.667 8.667 7.6 4-2.533-.667-7.6 4s-10.133 4.667-15.2 0" stroke="currentColor" stroke-linecap="square" fill="none" />
      </pattern>
    </defs>
    <rect width="100%" height="100%" fill="url(#itps-wavy-divider-pattern)" />
  </svg>
</div>

Instalação

O comando instala o Separator da sua stack com o tema Sinapse. Configure o registry uma vez por projeto em Comece por aqui.

terminal · React/Next

pnpm dlx shadcn@latest add @sinapse/wavy-divider

terminal · Vue 3/Nuxt 4

pnpm dlx shadcn-vue@latest add https://dsystem.sinapse.org.br/r/vue/wavy-divider.json

Sem shadcn, não há instalação por componente: use o CSS Sinapse e as classes da API copy-first desta página.

Uso

Use Wavy Divider como ornamento entre seções extensas de páginas institucionais, landing pages e documentos longos. Ele não comunica estrutura por si só; headings, landmarks e ordem do conteúdo precisam continuar claros sem a onda.

Em React/Next com shadcn/ui e Vue 3/Nuxt 4 com shadcn-vue, use Separator quando a necessidade for um divisor simples ou semântico. O shadcn não fornece um componente primitivo ondulado padrão; para a onda Sinapse, copie o HTML/SVG copy-first.

Exemplos

Estrutura

Peça	React/Next e Vue 3/Nuxt 4	HTML
Separador simples	`Separator`	borda/linha do layout
Separador ondulado	composição própria	`itps-wavy-divider`
SVG	não aplicável	`<svg width="100%" height="8">`
Padrão	não aplicável	`<pattern patternUnits="userSpaceOnUse">`
Cor	tokens do `Separator`	`currentColor` herdado da classe
Acessibilidade	semântica do componente primitivo	`aria-hidden="true"` decorativo

Entre seções

Use a onda com espaçamento generoso e mantenha o conteúdo em seções reais. Se o divisor precisa ser anunciado por leitor de tela, ele deixou de ser decorativo; nesse caso prefira heading, landmark ou Separator semântico na stack.

Fundamentos

Layout, grid, movimento e acessibilidade orientam a estrutura da página.

Componentes

Botão, cards, feedback e overlays seguem os tokens publicados pelo sistema.

<div class="grid w-full gap-6">
  <section class="grid gap-3">
    <h3 class="text-lg font-semibold text-foreground">Fundamentos</h3>
    <p class="max-w-prose text-sm text-muted-foreground">
      Layout, grid, movimento e acessibilidade orientam a estrutura da página.
    </p>
  </section>

  <div class="itps-wavy-divider" aria-hidden="true">
    <svg width="100%" height="8" fill="none" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <pattern id="itps-wavy-divider-pattern-sections" width="91" height="8" patternUnits="userSpaceOnUse">
          <path d="M114 4c-5.067 4.667-10.133 4.667-15.2 0S88.667-.667 83.6 4 73.467 8.667 68.4 4 58.267-.667 53.2 4 43.067 8.667 38 4 27.867-.667 22.8 4 12.667 8.667 7.6 4-2.533-.667-7.6 4s-10.133 4.667-15.2 0" stroke="currentColor" stroke-linecap="square" fill="none" />
        </pattern>
      </defs>
      <rect width="100%" height="100%" fill="url(#itps-wavy-divider-pattern-sections)" />
    </svg>
  </div>

  <section class="grid gap-3">
    <h3 class="text-lg font-semibold text-foreground">Componentes</h3>
    <p class="max-w-prose text-sm text-muted-foreground">
      Botão, cards, feedback e overlays seguem os tokens publicados pelo sistema.
    </p>
  </section>
</div>

API copy-first

Classe/atributo	Uso
`itps-wavy-divider`	Contêiner decorativo da onda, com largura total e margem vertical.
`svg[width="100%"][height="8"]`	Mantém a onda responsiva e baixa.
`patternUnits="userSpaceOnUse"`	Preserva a repetição horizontal do desenho.
`currentColor`	Herda a cor definida pela classe/tema.
`aria-hidden="true"`	Esconde a onda quando ela é decorativa.

Acessibilidade

Mantenha aria-hidden="true" no contêiner decorativo e não use a onda como único indicador de mudança de assunto. Se a página precisa comunicar uma nova região, use um título visível e uma estrutura semântica independente do SVG.