extraído de climatempo

Cabeçalho

Barra fixa no topo com fundo translúcido: título à esquerda e ações à direita (filtros, links, botões). É o cabeçalho desta vitrine.

Variações

Tela

Abrir em nova aba ↗

Playground

titulochildren (filtro de exemplo)larguraMaxima

Props

Geradas dos tipos TypeScript do componente; a descrição vem dos comentários /** */.

<Cabecalho>

Barra fixa no topo, com fundo translúcido: título à esquerda e ações à direita (filtros, links, botões). Acompanha a rolagem da página.

Prop	Tipo	Padrão	Descrição
tituloobrigatória	ReactNode	—
children	string \| number \| bigint \| boolean \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>	—	Ações à direita.
larguraMaxima	string	"max-w-[70rem]"	Classe de largura do conteúdo ("max-w-none" para ocupar a tela toda).

Código

stories.tsx tem os exemplos usados no preview e no playground.

cabecalho/Cabecalho.tsx

import type { ReactNode } from "react";

/**
 * Barra fixa no topo, com fundo translúcido: título à esquerda e ações à direita
 * (filtros, links, botões). Acompanha a rolagem da página.
 */
export function Cabecalho({
  titulo,
  children,
  larguraMaxima = "max-w-[70rem]",
}: {
  titulo: ReactNode;
  /** Ações à direita. */
  children?: ReactNode;
  /** Classe de largura do conteúdo ("max-w-none" para ocupar a tela toda). */
  larguraMaxima?: string;
}) {
  return (
    <header className="sticky top-0 z-40 border-b border-rule bg-page/90 backdrop-blur-md">
      <div
        className={`mx-auto flex flex-col gap-2 px-6 py-3 md:flex-row md:items-center md:justify-between md:gap-3 md:py-4 ${larguraMaxima}`}
      >
        <span className="shrink-0 font-display text-lg font-extrabold tracking-tight whitespace-nowrap">{titulo}</span>
        {children && <div className="flex flex-wrap items-center gap-3 md:justify-end">{children}</div>}
      </div>
    </header>
  );
}

cabecalho/stories.tsx

import { useState } from "react";
import { SeletorMultiplo } from "@/library/seletor-multiplo/SeletorMultiplo";
import { defineStories } from "@/registry/stories";
import { Cabecalho } from "./Cabecalho";

const LOJAS = [
  { valor: "centro", rotulo: "Centro", cor: "var(--series-1)" },
  { valor: "shopping", rotulo: "Shopping", cor: "var(--series-2)" },
  { valor: "online", rotulo: "Online", cor: "var(--series-3)" },
];

function Filtro() {
  const [lojas, setLojas] = useState(LOJAS.map((l) => l.valor));
  return (
    <SeletorMultiplo
      rotulo="Lojas"
      opcoes={LOJAS}
      selecionados={lojas}
      aoMudar={setLojas}
      textos={{ todos: "Todas", nenhum: "Nenhuma", marcarTodos: "Marcar todas" }}
    />
  );
}

export default defineStories({
  args: { titulo: "Painel de vendas", comFiltro: true, larguraMaxima: "max-w-[70rem]" },
  controls: {
    titulo: { type: "text" },
    comFiltro: { type: "boolean", label: "children (filtro de exemplo)" },
    larguraMaxima: { type: "select", options: ["max-w-[70rem]", "max-w-5xl", "max-w-none"] },
  },
  render: (a) => (
    <div className="min-h-72 w-full">
      <Cabecalho titulo={a.titulo} larguraMaxima={a.larguraMaxima}>
        {a.comFiltro ? <Filtro /> : undefined}
      </Cabecalho>
    </div>
  ),
  stories: [{ name: "Com filtro" }, { name: "Só o título", args: { comFiltro: false } }],
});

Para usar em outro projeto, copie também

Os componentes de que este depende e o tema. O CSS do tema é um arquivo só: importe depois do Tailwind.

Tema escolhido no cabeçalho (com a ponte para o Tailwind)

Ver o CSS do tema

tema-editorial.css · Editorial

/* Tema "Editorial", gerado no Component Vault.
   Importe depois de @import "tailwindcss". Carregue as fontes "Archivo" e "Inter" no projeto. */
@theme inline {
  --color-page: var(--page);
  --color-surface: var(--surface);
  --color-track: var(--track);
  --color-grid: var(--grid);
  --color-ink: var(--ink);
  --color-ink-2: var(--ink-2);
  --color-muted: var(--muted);
  --color-rule: var(--rule);
  --color-rule-strong: var(--rule-strong);
  --color-axis: var(--axis);
  --color-accent: var(--accent);
  --color-success: var(--success);
  --color-warning: var(--warning);
  --color-critical: var(--critical);
  --font-display: var(--fonte-titulo);
  --shadow-flutuante: var(--sombra-flutuante);
}

:root {
  color-scheme: light dark;
  --page: light-dark(#ffffff, #0f0f0e);
  --surface: light-dark(#f5f5f5, #1a1a19);
  --track: light-dark(#f0f0f0, #262624);
  --grid: light-dark(#ededed, #232321);
  --ink: light-dark(#111111, #f0efec);
  --ink-2: light-dark(#4a4a4a, #c3c2b7);
  --muted: light-dark(#666666, #a3a29a);
  --rule: light-dark(#e3e3e3, #2c2c2a);
  --rule-strong: light-dark(#111111, #f0efec);
  --axis: light-dark(#9a9a9a, #6b6a64);
  --accent: light-dark(#1a56db, #7aa2f7);
  --success: light-dark(#13865c, #3fc48f);
  --warning: #fab219;
  --critical: #d03b3b;
  --series-1: light-dark(#2a78d6, #3987e5);
  --series-2: light-dark(#eb6834, #d95926);
  --series-3: light-dark(#1baf7a, #199e70);
  --series-4: light-dark(#eda100, #c98500);
  --series-5: light-dark(#e87ba4, #d55181);
  --series-6: #008300;
  --series-7: light-dark(#6250d6, #9085e9);
  --series-8: light-dark(#e34948, #e66767);
  --fonte-titulo: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fonte-texto: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --spacing: 0.25rem;
  --text-xs: 0.8rem;
  --text-sm: 0.8944rem;
  --text-base: 1rem;
  --text-lg: 1.118rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5625rem;
  --text-3xl: 1.9531rem;
  --text-4xl: 2.4414rem;
  --text-5xl: 3.0518rem;
  --text-6xl: 3.8147rem;
  --text-7xl: 4.7684rem;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-4xl: 32px;
  --sombra-flutuante: 0 8px 24px -6px rgb(0 0 0 / 0.14), 0 2px 6px -2px rgb(0 0 0 / 0.08);
  color: var(--ink);
  font-family: var(--fonte-texto);
}

Na vitrine, a ponte com o Tailwind fica em src/themes/tokens.css:

src/themes/tokens.css

/* Ponte entre os tokens do tema e o Tailwind.

   Os componentes da biblioteca usam classes comuns do Tailwind (p-5, text-sm,
   rounded-xl...) e as cores semânticas abaixo (bg-page, text-ink...). Dentro de
   [data-theme="vault"], o tema redefine as variáveis que essas classes leem:
   --spacing, --text-*, --radius-* e as cores. Os valores vêm do tema escolhido
   na vitrine (src/themes/presets.ts) e são gerados por themeCss(). */
@theme inline {
  --color-page: var(--page);
  --color-surface: var(--surface);
  --color-ink: var(--ink);
  --color-ink-2: var(--ink-2);
  --color-muted: var(--muted);
  --color-rule: var(--rule);
  --color-rule-strong: var(--rule-strong);
  --color-track: var(--track);
  --color-grid: var(--grid);
  --color-axis: var(--axis);
  --color-accent: var(--accent);
  --color-success: var(--success);
  --color-warning: var(--warning);
  --color-critical: var(--critical);
  --font-display: var(--fonte-titulo);
  --shadow-flutuante: var(--sombra-flutuante);
}

Prop

Tipo

Padrão

Descrição

tituloobrigatória

ReactNode

—

children

—

Ações à direita.

larguraMaxima

string

"max-w-[70rem]"

Classe de largura do conteúdo ("max-w-none" para ocupar a tela toda).

import type { ReactNode } from "react"; /** * Barra fixa no topo, com fundo translúcido: título à esquerda e ações à direita * (filtros, links, botões). Acompanha a rolagem da página. */ export function Cabecalho({ titulo, children, larguraMaxima = "max-w-[70rem]", }: { titulo: ReactNode; /** Ações à direita. */ children?: ReactNode; /** Classe de largura do conteúdo ("max-w-none" para ocupar a tela toda). */ larguraMaxima?: string; }) { return ( <header className="sticky top-0 z-40 border-b border-rule bg-page/90 backdrop-blur-md"> <div className={`mx-auto flex flex-col gap-2 px-6 py-3 md:flex-row md:items-center md:justify-between md:gap-3 md:py-4 ${larguraMaxima}`} > <span className="shrink-0 font-display text-lg font-extrabold tracking-tight whitespace-nowrap">{titulo}</span> {children && <div className="flex flex-wrap items-center gap-3 md:justify-end">{children}</div>} </div> </header> ); }

import { useState } from "react"; import { SeletorMultiplo } from "@/library/seletor-multiplo/SeletorMultiplo"; import { defineStories } from "@/registry/stories"; import { Cabecalho } from "./Cabecalho"; const LOJAS = [ { valor: "centro", rotulo: "Centro", cor: "var(--series-1)" }, { valor: "shopping", rotulo: "Shopping", cor: "var(--series-2)" }, { valor: "online", rotulo: "Online", cor: "var(--series-3)" }, ]; function Filtro() { const [lojas, setLojas] = useState(LOJAS.map((l) => l.valor)); return ( <SeletorMultiplo rotulo="Lojas" opcoes={LOJAS} selecionados={lojas} aoMudar={setLojas} textos={{ todos: "Todas", nenhum: "Nenhuma", marcarTodos: "Marcar todas" }} /> ); } export default defineStories({ args: { titulo: "Painel de vendas", comFiltro: true, larguraMaxima: "max-w-[70rem]" }, controls: { titulo: { type: "text" }, comFiltro: { type: "boolean", label: "children (filtro de exemplo)" }, larguraMaxima: { type: "select", options: ["max-w-[70rem]", "max-w-5xl", "max-w-none"] }, }, render: (a) => ( <div className="min-h-72 w-full"> <Cabecalho titulo={a.titulo} larguraMaxima={a.larguraMaxima}> {a.comFiltro ? <Filtro /> : undefined} </Cabecalho> </div> ), stories: [{ name: "Com filtro" }, { name: "Só o título", args: { comFiltro: false } }], });

/* Tema "Editorial", gerado no Component Vault. Importe depois de @import "tailwindcss". Carregue as fontes "Archivo" e "Inter" no projeto. */ @theme inline { --color-page: var(--page); --color-surface: var(--surface); --color-track: var(--track); --color-grid: var(--grid); --color-ink: var(--ink); --color-ink-2: var(--ink-2); --color-muted: var(--muted); --color-rule: var(--rule); --color-rule-strong: var(--rule-strong); --color-axis: var(--axis); --color-accent: var(--accent); --color-success: var(--success); --color-warning: var(--warning); --color-critical: var(--critical); --font-display: var(--fonte-titulo); --shadow-flutuante: var(--sombra-flutuante); } :root { color-scheme: light dark; --page: light-dark(#ffffff, #0f0f0e); --surface: light-dark(#f5f5f5, #1a1a19); --track: light-dark(#f0f0f0, #262624); --grid: light-dark(#ededed, #232321); --ink: light-dark(#111111, #f0efec); --ink-2: light-dark(#4a4a4a, #c3c2b7); --muted: light-dark(#666666, #a3a29a); --rule: light-dark(#e3e3e3, #2c2c2a); --rule-strong: light-dark(#111111, #f0efec); --axis: light-dark(#9a9a9a, #6b6a64); --accent: light-dark(#1a56db, #7aa2f7); --success: light-dark(#13865c, #3fc48f); --warning: #fab219; --critical: #d03b3b; --series-1: light-dark(#2a78d6, #3987e5); --series-2: light-dark(#eb6834, #d95926); --series-3: light-dark(#1baf7a, #199e70); --series-4: light-dark(#eda100, #c98500); --series-5: light-dark(#e87ba4, #d55181); --series-6: #008300; --series-7: light-dark(#6250d6, #9085e9); --series-8: light-dark(#e34948, #e66767); --fonte-titulo: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif; --fonte-texto: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --spacing: 0.25rem; --text-xs: 0.8rem; --text-sm: 0.8944rem; --text-base: 1rem; --text-lg: 1.118rem; --text-xl: 1.25rem; --text-2xl: 1.5625rem; --text-3xl: 1.9531rem; --text-4xl: 2.4414rem; --text-5xl: 3.0518rem; --text-6xl: 3.8147rem; --text-7xl: 4.7684rem; --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-2xl: 16px; --radius-3xl: 24px; --radius-4xl: 32px; --sombra-flutuante: 0 8px 24px -6px rgb(0 0 0 / 0.14), 0 2px 6px -2px rgb(0 0 0 / 0.08); color: var(--ink); font-family: var(--fonte-texto); }

/* Ponte entre os tokens do tema e o Tailwind. Os componentes da biblioteca usam classes comuns do Tailwind (p-5, text-sm, rounded-xl...) e as cores semânticas abaixo (bg-page, text-ink...). Dentro de [data-theme="vault"], o tema redefine as variáveis que essas classes leem: --spacing, --text-*, --radius-* e as cores. Os valores vêm do tema escolhido na vitrine (src/themes/presets.ts) e são gerados por themeCss(). */ @theme inline { --color-page: var(--page); --color-surface: var(--surface); --color-ink: var(--ink); --color-ink-2: var(--ink-2); --color-muted: var(--muted); --color-rule: var(--rule); --color-rule-strong: var(--rule-strong); --color-track: var(--track); --color-grid: var(--grid); --color-axis: var(--axis); --color-accent: var(--accent); --color-success: var(--success); --color-warning: var(--warning); --color-critical: var(--critical); --font-display: var(--fonte-titulo); --shadow-flutuante: var(--sombra-flutuante); }