---
title: Extended blocks
description: Install the gallery, content, hero, feature, contact, and footer blocks from the earlier collection.
---

[Open all block examples](/examples/extended-blocks).

The earlier candidate blocks are now active in `@gnosticai/ui`. Each block has
its own registry item. For example:

```sh
bunx --bun shadcn@latest add @gnosticai/features-tabs @gnosticai/stacked-images
```

Import installed blocks from `src/components/blocks/<category>/<name>.astro`.
The registry includes their shared UI and style dependencies. Blocks use plain
Astro props and slots. They do not need routes or content collections.

| Category | Blocks |
| --- | --- |
| Hero | `bg-image-hero`, `page-hero`, `page-title`, `page-top`, `slanted-image-hero` |
| Features | `bento-features`, `feature-grid`, `features-grid`, `features-showcase`, `features-tabs`, `image-tabs`, `list-icons-with-image` |
| Content | `bento-images`, `comparison-slider-section`, `content-section`, `content-visual-section`, `split-image-left`, `stacked-images` |
| Gallery | `hover-gallery`, `image-collage`, `image-tabs-section`, `masonry-gallery-right` |
| Calls to action | `dark-pattern-section`, `pattern-cta` |
| Articles and products | `case-studies`, `bento-collection` |
| Contact | `contact-blocks`, `contact-icon-block`, `contact-form-section` |
| Footer | `footer-with-social`, `footer-bottom`, `footer-nav-section`, `social-links` |

`features-tabs` uses the shared Tabs controls. Each instance works on its own.
`comparison-slider-section` provides a working image comparison; use its
`slider` slot to supply another control. `contact-form-section` supplies the
layout and contact details; put your form in its default slot.

For props that accept HTML, such as icon markup and tab content, use trusted
content. Email obfuscation applies only to the contact link that requests it.

Install the shared `init` style item for the color theme, component appearances,
and prose rules. Use one `global.css` entry stylesheet per site.