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
Card Grid
Browsable grid of components organized by category with tabs and filters
npx astryx template library
Open in Playground
Previous: Page Editor
Next: Documentation Catalog
Astryx Design System
Library
Search
All
All
Layout
Layout
Forms
Forms
Navigation
Navigation
Feedback
Feedback
Data
Data
+6
All
Layout
Forms
Navigation
Feedback
Data
All
All
Layout
Layout
Forms
Forms
Navigation
Navigation
Feedback
Feedback
Data
Data
A-Z
A-Z
Z-A
Newest
Layout
Card
Surface container with optional padding, border, and shadow variants.
Center
Centers its child both horizontally and vertically.
Collapsible
Expandable region with animated height transition.
Grid
Responsive grid container with auto-fit columns and gap control.
Section
Semantic page section with optional heading and divider.
Stack
Vertical and horizontal stack layouts with configurable gap and alignment.
Forms
CheckboxInput
Checkbox with label, indeterminate state, and group support.
RadioList
Group of radio buttons with accessible fieldset wrapper.
Selector
Dropdown or inline option selector with single and multi-select modes.
Switch
Toggle switch for binary on/off settings.
TextArea
Multi-line text field with auto-resize and character count.
TextInput
Single-line text field with label, placeholder, and validation states.
Navigation
Breadcrumbs
Path trail navigation with separator and truncation support.
MobileNav
Bottom tab bar for mobile viewports with icon and label slots.
Pagination
Page navigation with prev/next controls and page count display.
SideNav
Vertical sidebar navigation with collapsible groups and active states.
TabList
Horizontal tab navigation with underline indicator and keyboard support.
TopNav
Application top bar with logo, nav links, and action slots.
Feedback
Badge
Compact label for status, count, or category with semantic color variants.
Banner
Full-width alert bar for info, success, warning, and error messages.
ProgressBar
Horizontal bar indicating task completion percentage.
Spinner
Animated loading indicator with size and color variants.
StatusDot
Small dot indicator for presence, health, or pipeline status.
Tooltip
Contextual label that appears on hover with configurable placement.
Data
Avatar
User profile image with fallback initials and status dot support.
HoverCard
Rich popover that appears on hover with arbitrary content.
PowerSearch
Command-palette style search with grouped results and keyboard nav.
Skeleton
Placeholder shimmer for loading states matching content shapes.
Table
Feature-rich data table with sorting, selection, and column resizing.
Typeahead
Autocomplete input with async suggestion loading and selection.