Preview the Astro design system.
Every block, grouped by family, with the components, backgrounds, and animated visuals they're built from. Pick a category to see its variants.
Components
Primitive components showcase: buttons, cards, inputs, tokens, and more.
Backgrounds
Grids, glows, meshes, stars, rings, waves, images, and more, layered behind any block.
Animated visuals
Animated illustrations for any visual slot: charts, code, search, payments, and more.
Hero
Above-the-fold blocks for headlines, announcements, products, video, and stats.
Footers
Simple and rich footer blocks with link columns and socials.
Error
Centered error pages for 404 and other utility states, with optional visuals.
Features
Grids, bento layouts, splits, benefits, comparisons, and use cases.
Pricing
Tiered tables and single plans, with an optional monthly and yearly toggle.
Testimonials
Cards, carousels, and case studies that turn customer words into trust.
CTA
Call-to-action banners in card, split, and plain variants.
Logos
Logo cloud blocks for social proof: rows, grids, and marquees.
Stats
Metrics blocks: inline rows, grids, cards, and split layouts.
FAQ
Accordion-style FAQ blocks in stacked and split layouts.
Contact
Contact sections with forms, info, and multi-channel details.
Newsletter
Email signup blocks for capturing subscribers across layouts.
Team
Team grids and featured-leader spotlights with bios, photos, and social links.
Process
How-it-works blocks: numbered step grids and vertical or horizontal timelines.
Timeline
Roadmap and timeline blocks in vertical and horizontal layouts.
Blog
Listing blocks: lists, grids, and featured layouts for blog index pages.
Blog post
Article rendering blocks: header, typeset content wrapper, and post footer.