Skip to content
Docs
Components
Templates
Themes
Playground
Search
Switch to dark mode
Community
GitHub
Get started
Type to search
Templates
Ready-to-use page templates to kickstart your project.
All
All
Table
Table
Form
Form
Settings
Settings
Login
Login
Tools
Tools
Content
Content
AI Chat
AI Chat
Gallery
Gallery
Grouped Table
Grouped data table with collapsible status sections, PowerSearch, and a resizable detail panel.
Preview
Open in Playground
Searchable Table
Data table page with power search filtering and action toolbar.
Preview
Open in Playground
Checkout Form
Secure checkout page with billing info, card details, and order summary.
Preview
Open in Playground
Contact Form
Marketing lead-capture form with pill toggles, dropdowns, and full-width CTA.
Preview
Open in Playground
Two-column Form
Hero header with form card layout for data collection
Preview
Open in Playground
Settings Form
Account settings as a single scrolling form with profile, password, and advanced configuration sections
Preview
Open in Playground
Settings Panels
Account settings with nav-switched panels, inline row editing, and multi-section privacy controls
Preview
Open in Playground
Login Card
Centered login card with social sign-in and email form
Preview
Open in Playground
Login Split
Split-screen login with form and cover image
Preview
Open in Playground
Login SSO
SSO login with email-based provider detection
Preview
Open in Playground
File Explorer
Column-based file browser inspired by macOS Finder
Preview
Open in Playground
IDE
Code editor workspace with file explorer, tabbed editor, terminal panel, and properties sidebar, all resizable and collapsible.
Preview
Open in Playground
Page Editor
Block-based page builder with sidebar config and live preview
Preview
Open in Playground
Card Grid
Browsable grid of components organized by category with tabs and filters
Preview
Open in Playground
Documentation Catalog
Documentation landing page with hero banner and component category grid organized by Core, Layout, Navigation, and Form.
Preview
Open in Playground
Documentation Design
Component documentation page with live preview, usage guide, best practices table, and code examples.
Preview
Open in Playground
Documentation Technical
Getting started guide with install steps, AI assistance prompt card, theming setup, and next steps.
Preview
Open in Playground
Order Detail
Order detail page with timeline and line items
Preview
Open in Playground
Product Detail
Product page with image gallery and collapsible sections
Preview
Open in Playground
AI Chat Conversation
AI assistant conversation view with tool calls, system messages, markdown, code blocks, multi-bubble grouping, and a resizable artifact preview panel for generated documents
Preview
Open in Playground
AI Chat Landing
AI assistant landing page with chat composer, greeting, and category toggles
Preview
Open in Playground
Centered Hero
Centered headline, description, and CTA buttons above a wide hero image.
Preview
Open in Playground
Classic Gallery
Responsive image gallery with a centered intro header and category filter tabs.
Preview
Open in Playground
Gallery Hero
Centered headline, description, and CTA buttons above a three-image gallery grid.
Preview
Open in Playground
Mixed Gallery
Masonry-style image gallery with varying image sizes.
Preview
Open in Playground
Product Gallery
Card grid of products with images, titles, descriptions, and prices
Preview
Open in Playground
Side Gallery
Text and CTA on the left with an image collage on the right
Preview
Open in Playground
Gallery Hero
Centered headline, description, and CTA buttons above a three-image gallery grid.
npx astryx template gallery-hero
Open in Playground
Previous: Classic Gallery
Next: Mixed Gallery
Little joys, everywhere you go
Sometimes all it takes is one small thing to turn your whole day around.
Get started
Learn more
Astryx Design System
