> ## Documentation Index
> Fetch the complete documentation index at: https://docs.growtify.me/llms.txt
> Use this file to discover all available pages before exploring further.

# Componentes de interface

> Botões, cards, alertas, navegação, modais, tabs, tipografia e todas as demais páginas UI do tema. Cada demonstração mantém as variantes originais.

export const Exemplo = ({src, demo, titulo}) => {
  const [height, setHeight] = useState(520);
  const [theme, setTheme] = useState("dark");
  const [revision, setRevision] = useState(0);
  useEffect(() => {
    const receive = event => {
      if (event.origin !== "https://skin.growtify.me" || event.data?.type !== "growtify:example-size" || event.data?.demo !== demo) return;
      const value = Number(event.data.height);
      if (Number.isFinite(value) && value > 0 && value < 100000) setHeight(value);
    };
    window.addEventListener("message", receive);
    return () => window.removeEventListener("message", receive);
  }, [demo]);
  return <div style={{
    margin: "16px 0 40px"
  }}>
    <div style={{
    display: "flex",
    gap: 16,
    justifyContent: "flex-end",
    marginBottom: 8
  }}>
      <button onClick={() => setTheme(theme === "dark" ? "light" : "dark")}>{theme === "dark" ? "Ver Light" : "Ver Dark"}</button>
      <button onClick={() => setRevision(revision + 1)}>Repetir animação</button>
    </div>
    <iframe key={theme + revision} title={titulo} src={src + "&single=1&theme=" + theme} width="100%" height={height} style={{
    border: 0,
    display: "block",
    borderRadius: 12
  }} scrolling="no" loading="lazy" />
  </div>;
};

Os 27 exemplos desta categoria aparecem abaixo, um após o outro. Use o índice da página para ir direto ao modelo desejado.

## ui / accordions

<Exemplo src="https://skin.growtify.me/catalog/ubold?family=ui&demo=ui%2Faccordions" demo="ui/accordions" titulo="ui / accordions" />

## ui / alerts

<Exemplo src="https://skin.growtify.me/catalog/ubold?family=ui&demo=ui%2Falerts" demo="ui/alerts" titulo="ui / alerts" />

## ui / badges

<Exemplo src="https://skin.growtify.me/catalog/ubold?family=ui&demo=ui%2Fbadges" demo="ui/badges" titulo="ui / badges" />

## ui / breadcrumb

<Exemplo src="https://skin.growtify.me/catalog/ubold?family=ui&demo=ui%2Fbreadcrumb" demo="ui/breadcrumb" titulo="ui / breadcrumb" />

## ui / buttons

<Exemplo src="https://skin.growtify.me/catalog/ubold?family=ui&demo=ui%2Fbuttons" demo="ui/buttons" titulo="ui / buttons" />

## ui / cards

<Exemplo src="https://skin.growtify.me/catalog/ubold?family=ui&demo=ui%2Fcards" demo="ui/cards" titulo="ui / cards" />

## ui / carousel

<Exemplo src="https://skin.growtify.me/catalog/ubold?family=ui&demo=ui%2Fcarousel" demo="ui/carousel" titulo="ui / carousel" />

## ui / collapse

<Exemplo src="https://skin.growtify.me/catalog/ubold?family=ui&demo=ui%2Fcollapse" demo="ui/collapse" titulo="ui / collapse" />

## ui / colors

<Exemplo src="https://skin.growtify.me/catalog/ubold?family=ui&demo=ui%2Fcolors" demo="ui/colors" titulo="ui / colors" />

## ui / dropdowns

<Exemplo src="https://skin.growtify.me/catalog/ubold?family=ui&demo=ui%2Fdropdowns" demo="ui/dropdowns" titulo="ui / dropdowns" />

## ui / grid

<Exemplo src="https://skin.growtify.me/catalog/ubold?family=ui&demo=ui%2Fgrid" demo="ui/grid" titulo="ui / grid" />

## ui / images

<Exemplo src="https://skin.growtify.me/catalog/ubold?family=ui&demo=ui%2Fimages" demo="ui/images" titulo="ui / images" />

## ui / links

<Exemplo src="https://skin.growtify.me/catalog/ubold?family=ui&demo=ui%2Flinks" demo="ui/links" titulo="ui / links" />

## ui / list group

<Exemplo src="https://skin.growtify.me/catalog/ubold?family=ui&demo=ui%2Flist-group" demo="ui/list-group" titulo="ui / list group" />

## ui / modals

<Exemplo src="https://skin.growtify.me/catalog/ubold?family=ui&demo=ui%2Fmodals" demo="ui/modals" titulo="ui / modals" />

## ui / notifications

<Exemplo src="https://skin.growtify.me/catalog/ubold?family=ui&demo=ui%2Fnotifications" demo="ui/notifications" titulo="ui / notifications" />

## ui / offcanvas

<Exemplo src="https://skin.growtify.me/catalog/ubold?family=ui&demo=ui%2Foffcanvas" demo="ui/offcanvas" titulo="ui / offcanvas" />

## ui / pagination

<Exemplo src="https://skin.growtify.me/catalog/ubold?family=ui&demo=ui%2Fpagination" demo="ui/pagination" titulo="ui / pagination" />

## ui / placeholders

<Exemplo src="https://skin.growtify.me/catalog/ubold?family=ui&demo=ui%2Fplaceholders" demo="ui/placeholders" titulo="ui / placeholders" />

## ui / popovers

<Exemplo src="https://skin.growtify.me/catalog/ubold?family=ui&demo=ui%2Fpopovers" demo="ui/popovers" titulo="ui / popovers" />

## ui / progress

<Exemplo src="https://skin.growtify.me/catalog/ubold?family=ui&demo=ui%2Fprogress" demo="ui/progress" titulo="ui / progress" />

## ui / spinners

<Exemplo src="https://skin.growtify.me/catalog/ubold?family=ui&demo=ui%2Fspinners" demo="ui/spinners" titulo="ui / spinners" />

## ui / tabs

<Exemplo src="https://skin.growtify.me/catalog/ubold?family=ui&demo=ui%2Ftabs" demo="ui/tabs" titulo="ui / tabs" />

## ui / tooltips

<Exemplo src="https://skin.growtify.me/catalog/ubold?family=ui&demo=ui%2Ftooltips" demo="ui/tooltips" titulo="ui / tooltips" />

## ui / typography

<Exemplo src="https://skin.growtify.me/catalog/ubold?family=ui&demo=ui%2Ftypography" demo="ui/typography" titulo="ui / typography" />

## ui / utilities

<Exemplo src="https://skin.growtify.me/catalog/ubold?family=ui&demo=ui%2Futilities" demo="ui/utilities" titulo="ui / utilities" />

## ui / videos

<Exemplo src="https://skin.growtify.me/catalog/ubold?family=ui&demo=ui%2Fvideos" demo="ui/videos" titulo="ui / videos" />

<Note>
  Dados demonstrativos. Exemplos de estados vazios ou de carregamento têm controles próprios para alternar o estado. As páginas originais UBold preservam seus componentes; não representam telas já implementadas no GHL.
</Note>