---
title: Example overview
description: "See Astro controls and reusable sections assembled with sample page content."
seo:
    title: "Astro page composition examples"
---

These examples show how controls and sections fit together. Inspect the source, replace the sample content, and use the parts that match your page. Each block keeps its content in Astro props so it can be reused in another site.

## Header

```astro
---
import HeaderBlock from "@/components/blocks/header/header-4.astro"
---

<HeaderBlock
  logo={{
    label: "Acme Inc",
    href: "/",
  }}
  navigation={[
    {
      label: "Products",
      href: "#",
      description: "Plan, launch, and measure product work from one place.",
      links: [
        {
          label: "Analytics",
          href: "#",
          description: "Track funnels, cohorts, and conversion paths.",
          icon: "chart-no-axes-column",
        },
        {
          label: "Automation",
          href: "#",
          description: "Trigger workflows from product and customer events.",
          icon: "workflow",
        },
      ],
    },
    {
      label: "Solutions",
      href: "#",
      description: "Focused workflows for teams that need more context.",
      links: [
        {
          label: "Marketing",
          href: "#",
          description: "Launch campaigns with shared assets and reporting.",
          icon: "megaphone",
        },
        {
          label: "Operations",
          href: "#",
          description: "Coordinate approvals, handoffs, and recurring work.",
          icon: "settings-2",
        },
      ],
    },
    { label: "Pricing", href: "#" },
    { label: "Customers", href: "#" },
  ]}
  buttons={[
    { label: "Sign in", href: "#", variant: "ghost" },
    { label: "Start trial", href: "#", variant: "default" },
  ]}
/>
```

```sh
bunx --bun shadcn@latest add @gnosticai/header-4
```

## Hero

```astro
---
import HomeHeroBlock from "@/components/blocks/hero/hero-1.astro"
import placeholderImage from "@/assets/placeholder.webp"
---

<HomeHeroBlock
  title="Build content-heavy Astro sites with composable sections"
  description="Use the gnosticai block library when you want a complete hero, FAQ, or CTA section with layout, rhythm, and visual structure already solved."
  badge={{ label: "Blocks", href: "/blocks" }}
  buttons={[
    { label: "Browse docs", href: "/docs", variant: "default" },
    {
      label: "See components",
      href: "/components",
      variant: "outline",
    },
  ]}
  image={{ src: placeholderImage, alt: "gnosticai block preview" }}
/>
```

```sh
bunx --bun shadcn@latest add @gnosticai/hero-1
```

## Features

```astro
---
import IconFeatureGridBlock from "@/components/blocks/features/features-2.astro"
---

<IconFeatureGridBlock
  title="Sections made for real content sites"
  description="Each block handles layout, spacing, and presentation so you can compose full pages from larger pieces instead of wiring every section from scratch."
  features={[
    {
      icon: "blocks",
      title: "Complete sections",
      description:
        "Start from a full hero, CTA, FAQ, or footer instead of assembling a section one primitive at a time.",
    },
    {
      icon: "layout-grid",
      title: "Responsive by default",
      description:
        "Blocks already account for page width, rhythm, and breakpoint behavior across editorial and marketing layouts.",
    },
    {
      icon: "search",
      title: "Easy to scan",
      description:
        "The wider preview surface makes it easier to judge spacing, density, and hierarchy before you ship a page.",
    },
    {
      icon: "palette",
      title: "Theme aware",
      description:
        "Blocks inherit tokens, surfaces, and typography so they stay coherent with the rest of the system.",
    },
    {
      icon: "wand-sparkles",
      title: "Astro live previews",
      description:
        "Every example stays editable and copyable in MDX, including the entire section markup for each preview.",
    },
    {
      icon: "rocket",
      title: "Ready to compose",
      description:
        "Use blocks as starting points for landing pages, docs marketing surfaces, and product storytelling pages.",
    },
  ]}
/>
```

```sh
bunx --bun shadcn@latest add @gnosticai/features-2
```

## Questions

```astro
---
import FaqBlock from "@/components/blocks/faqs/faqs-1.astro"
---

<FaqBlock
  title="Questions teams ask before using blocks"
  description="Blocks are meant for higher-level composition. Keep primitives in the component docs and use this area when you want full sections."
  faqs={[
    {
      id: "blocks-faq-1",
      question: "When should I use a block page instead of a component doc?",
      answer:
        "Use a block page when the example needs to show an entire section with real spatial behavior, not just a single primitive in isolation.",
    },
    {
      id: "blocks-faq-2",
      question: "Why is the layout wider here?",
      answer:
        "A hero or FAQ section needs room to breathe. The wider container makes the preview feel like an actual page slice instead of a compressed demo.",
    },
    {
      id: "blocks-faq-3",
      question: "How do the live previews work?",
      answer:
        "Each preview renders an Astro example file. Blume shows the same file in the Code tab, so the example source stays visible and copyable.",
    },
  ]}
/>
```

```sh
bunx --bun shadcn@latest add @gnosticai/faqs-1
```

## Next action

```astro
---
import CallToActionBlock from "@/components/blocks/cta/cta-1.astro"
---

<CallToActionBlock
  title="Ship fuller page sections without switching patterns"
  description="The new Blocks layout keeps the docs authoring model, but the presentation is tuned for complete sections and larger visual slices."
  buttons={[
    { label: "Start with docs", href: "/docs", variant: "default" },
    {
      label: "View components",
      href: "/components",
      variant: "outline",
    },
  ]}
/>
```

```sh
bunx --bun shadcn@latest add @gnosticai/cta-1
```

## Page structure

```astro
---
import Blocks from "@lucide/astro/icons/blocks"
import Component from "@lucide/astro/icons/component"

import { Button } from "@/components/ui/button"
---

<div class="@container/overview w-full">
  <section class="grid gap-6 @min-5xl/overview:grid-cols-[0.75fr_1.25fr] @min-5xl/overview:items-start">
    <div class="max-w-2xl space-y-3 @min-5xl/overview:sticky @min-5xl/overview:top-6">
      <h2 class="text-foreground text-2xl font-semibold tracking-tight">
        This is a block preview and documentation, in one place.
      </h2>
    </div>

    <div class="grid gap-4">
      <div class="from-primary/6 via-primary/2 to-border rounded-xl bg-gradient-to-br p-px">
        <div class="from-primary/3 via-primary/1 to-background rounded-[11px] bg-gradient-to-br p-5">
          <div class="space-y-2">
            <Component class="text-primary size-5" />
            <h3 class="text-foreground text-lg font-semibold tracking-tight">
              Components
            </h3>
            <p class="text-muted-foreground max-w-2xl text-sm leading-6">
              Use Astro controls and content parts with shared themes:
              typography, metadata, pricing, ratings, and docs navigation.
            </p>
          </div>
          <Button as="a" href="/components" size="sm" class="mt-5">
            View components
          </Button>
        </div>
      </div>

      <div class="from-primary/6 via-primary/2 to-border rounded-xl bg-gradient-to-br p-px">
        <div class="from-primary/3 via-primary/1 to-background rounded-[11px] bg-gradient-to-br p-5">
          <div class="space-y-2">
            <Blocks class="text-primary size-5" />
            <h3 class="text-foreground text-lg font-semibold tracking-tight">
              Blocks
            </h3>
            <p class="text-muted-foreground max-w-2xl text-sm leading-6">
              Use complete Astro sections for heroes, features, FAQs, pricing,
              articles, contact pages, and calls to action.
            </p>
          </div>
          <Button as="a" href="/blocks" size="sm" class="mt-5">
            {" "}
            View blocks{" "}
          </Button>
        </div>
      </div>
    </div>
  </section>
</div>
```

## Content parts

```astro
---
import { Button } from "@/components/ui/button"
import {
  Combobox,
  ComboboxContent,
  ComboboxEmpty,
  ComboboxInput,
  ComboboxItem,
  ComboboxList,
} from "@/components/ui/combobox"
import { Price, PriceUnit, PriceValue } from "@/components/ui/price"
import { Rating } from "@/components/ui/rating"
---

<div class="@container/overview w-full">
  <div class="grid w-full gap-0 overflow-hidden rounded-lg border @min-2xl/overview:grid-cols-2">
    <div class="flex flex-col gap-5 p-5">
      <div class="space-y-2">
        <p class="text-sm font-medium">Shadcn-parity primitives</p>
        <p class="text-muted-foreground text-sm leading-6">
          Button, Card, Tabs, Accordion, Dialog, Form, Select, and other
          familiar building blocks keep shadcn-style composition patterns.
        </p>
      </div>
      <div class="grid gap-3">
        <div class="flex flex-wrap gap-2">
          <Button size="sm">Save</Button>
          <Button size="sm" variant="outline">
            Preview
          </Button>
        </div>
        <Combobox class="w-full max-w-56">
          <ComboboxInput placeholder="Choose content type" />
          <ComboboxContent>
            <ComboboxList>
              <ComboboxEmpty>No content types found.</ComboboxEmpty>
              <ComboboxItem value="page">Page</ComboboxItem>
              <ComboboxItem value="article">Article</ComboboxItem>
              <ComboboxItem value="docs">Docs page</ComboboxItem>
              <ComboboxItem value="guide">Guide</ComboboxItem>
              <ComboboxItem value="landing">Landing page</ComboboxItem>
              <ComboboxItem value="changelog">Changelog</ComboboxItem>
              <ComboboxItem value="case-study">Case study</ComboboxItem>
            </ComboboxList>
          </ComboboxContent>
        </Combobox>
      </div>
    </div>
    <div class="border-border flex flex-col gap-5 p-5 @min-2xl/overview:border-l">
      <div class="space-y-2">
        <p class="text-sm font-medium">Content-driven extras</p>
        <p class="text-muted-foreground text-sm leading-6">
          Typography, Table of Contents, Price, Rating, Video, Banner, and
          navigation components support docs, articles, and marketing pages.
        </p>
      </div>
      <div class="grid gap-3">
        <Price>
          <PriceValue price={49} />
          <PriceUnit>month</PriceUnit>
        </Price>
        <div class="flex items-center gap-3">
          <Rating value={4.5} />
          <span class="text-muted-foreground text-sm">Editorial kit</span>
        </div>
      </div>
    </div>
  </div>
</div>
```

## Reusable sections

```astro
---
import Features2Block from "@/components/blocks/features/features-2.astro"
---

<Features2Block
  title="A registry workflow for real Astro projects"
  description="Use gnosticai UI when you want copyable source, clear docs, and full page sections that stay portable outside this website."
  features={[
    {
      icon: "file-code",
      title: "Copyable source",
      description:
        "Components and blocks install into your project as files you can version, inspect, and customize.",
    },
    {
      icon: "terminal",
      title: "shadcn-compatible installs",
      description:
        "Add individual items through the @gnosticai registry namespace with familiar shadcn CLI commands.",
    },
    {
      icon: "palette",
      title: "Token-driven theming",
      description:
        "Customize color, radius, spacing, and visual tone through CSS variables and Tailwind conventions.",
    },
    {
      icon: "blocks",
      title: "Components and blocks",
      description:
        "Start with primitives for precise control or use complete sections when the page needs stronger composition.",
    },
    {
      icon: "book-open",
      title: "Live documentation",
      description:
        "MDX examples render live previews and source so docs stay useful as implementation references.",
    },
    {
      icon: "shield-check",
      title: "Portable registry items",
      description:
        "Installable files avoid private docs, layout, route, global, and schema imports from this site.",
    },
  ]}
/>
```

```sh
bunx --bun shadcn@latest add @gnosticai/features-2
```

## Project questions

```astro
---
import FaqBlock from "@/components/blocks/faqs/faqs-1.astro"
---

<FaqBlock
  title="Before you start"
  description="How source, behavior, and content fit into an Astro project."
  faqs={[
    {
      id: "homepage-faq-1",
      question: "What gets installed?",
      answer:
        "The registry installs local source files and their dependencies. You can inspect and edit the Astro markup in your project.",
    },
    {
      id: "homepage-faq-2",
      question: "Does every component need a client script?",
      answer:
        "Static parts render as HTML. Interactive parts use the existing data-slot controllers or a dedicated script, such as the custom Scroll Area element.",
    },
    {
      id: "homepage-faq-3",
      question: "Where does page content belong?",
      answer:
        "Load content in the route or template, then pass it into a block through Astro props and slots. Reusable blocks do not own collections or routes.",
    },
    {
      id: "homepage-faq-4",
      question: "Where do the designs come from?",
      answer:
        "The project combines a Fulldotdev foundation, Coss visual design ports, and Gnostic components and blocks. The Credits guide explains those contributions.",
    },
  ]}
/>
```

```sh
bunx --bun shadcn@latest add @gnosticai/faqs-1
```

## Start a page

```astro
---
import Cta7Block from "@/components/blocks/cta/cta-7.astro"
import { agentAvatars } from "@/lib/agent-avatars"
---

<Cta7Block
  class="from-primary/8 via-primary/3 to-background bg-background bg-gradient-to-br"
  title="Build open-source Astro interfaces"
  description="Install source-owned primitives, compose complete sections, and adapt every file in your project."
  buttons={[
    { label: "Read the docs", href: "/docs" },
    {
      label: "Browse components",
      href: "/components",
      variant: "outline",
    },
  ]}
  socialProof={{
    avatars: [
      { image: agentAvatars[0], initials: "SV", name: "Community contributor" },
      { image: agentAvatars[1], initials: "JB", name: "Community contributor" },
      { image: agentAvatars[2], initials: "SR", name: "Community contributor" },
      { image: agentAvatars[3], initials: "NL", name: "Community contributor" },
      { image: agentAvatars[4], initials: "RG", name: "Community contributor" },
      { image: agentAvatars[5], initials: "BS", name: "Community contributor" },
      { image: agentAvatars[6], initials: "LJ", name: "Community contributor" },
      { image: agentAvatars[7], initials: "SP", name: "Community contributor" },
    ],
    count: "+8",
    text: "560 GitHub stars 16 contributors",
  }}
/>
```

```sh
bunx --bun shadcn@latest add @gnosticai/cta-7
```