> ## 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.
# Layouts do tema
> Variações estruturais do pacote. A escolha visual do Growtify continua sendo Galaxy; este catálogo não muda a decisão.
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
;
};
Os 18 exemplos desta categoria aparecem abaixo, um após o outro. Use o índice da página para ir direto ao modelo desejado.
## layouts / boxed
## layouts / compact
## layouts / horizontal
## layouts / preloader
## layouts / scrollable
## layouts / sidebar compact
## layouts / sidebar dark
## layouts / sidebar gradient
## layouts / sidebar gray
## layouts / sidebar image
## layouts / sidebar no icons
## layouts / sidebar offcanvas
## layouts / sidebar on hover
## layouts / sidebar on hover active
## layouts / sidebar with lines
## layouts / topbar gradient
## layouts / topbar gray
## layouts / topbar light
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.