Skip to content

Templates

Ready-to-use page templates to kickstart your project.

Grouped Table

Grouped data table with collapsible status sections, PowerSearch, and a resizable detail panel.

Open in Playground

Searchable Table

Data table page with power search filtering and action toolbar.

Open in Playground

Checkout Form

Secure checkout page with billing info, card details, and order summary.

Open in Playground

Contact Form

Marketing lead-capture form with pill toggles, dropdowns, and full-width CTA.

Open in Playground

Two-column Form

Hero header with form card layout for data collection

Open in Playground

Settings Form

Account settings as a single scrolling form with profile, password, and advanced configuration sections

Open in Playground

Settings Panels

Account settings with nav-switched panels, inline row editing, and multi-section privacy controls

Open in Playground

Login Card

Centered login card with social sign-in and email form

Open in Playground

Login Split

Split-screen login with form and cover image

Open in Playground

Login SSO

SSO login with email-based provider detection

Open in Playground

File Explorer

Column-based file browser inspired by macOS Finder

Open in Playground

IDE

Code editor workspace with file explorer, tabbed editor, terminal panel, and properties sidebar, all resizable and collapsible.

Open in Playground

Page Editor

Block-based page builder with sidebar config and live preview

Open in Playground

Card Grid

Browsable grid of components organized by category with tabs and filters

Open in Playground

Documentation Catalog

Documentation landing page with hero banner and component category grid organized by Core, Layout, Navigation, and Form.

Open in Playground

Documentation Design

Component documentation page with live preview, usage guide, best practices table, and code examples.

Open in Playground

Documentation Technical

Getting started guide with install steps, AI assistance prompt card, theming setup, and next steps.

Open in Playground

Order Detail

Order detail page with timeline and line items

Open in Playground

Product Detail

Product page with image gallery and collapsible sections

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

Open in Playground

AI Chat Landing

AI assistant landing page with chat composer, greeting, and category toggles

Open in Playground

Centered Hero

Centered headline, description, and CTA buttons above a wide hero image.

Open in Playground

Classic Gallery

Responsive image gallery with a centered intro header and category filter tabs.

Open in Playground

Gallery Hero

Centered headline, description, and CTA buttons above a three-image gallery grid.

Open in Playground

Mixed Gallery

Masonry-style image gallery with varying image sizes.

Open in Playground

Product Gallery

Card grid of products with images, titles, descriptions, and prices

Open in Playground

Side Gallery

Text and CTA on the left with an image collage on the right

Open in Playground

Astryx Design System