Extended blocks
Install the gallery, content, hero, feature, contact, and footer blocks from the earlier collection.
The earlier candidate blocks are now active in @gnosticai/ui. Each block has
its own registry item. For example:
bunx --bun shadcn@latest add @gnosticai/features-tabs @gnosticai/stacked-imagesImport 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.