Skip to content
A Astro Galaxis
50+ production components

Component Library

Production-ready UI primitives built with accessibility and performance in mind. Copy, paste, and customize to match your brand.

Browse Components View Source

Cosmic Effects

The Galaxis visual signature — four animated backgrounds you can drop into any section. All pure CSS (DotGrid adds a tiny cursor script), reduced-motion safe, and themed by the active brand colour.

AuroraGradient

Three drifting brand-coloured blobs. Best behind heroes and section breaks.

<AuroraGradient intensity="medium" />

Starfield

Three parallax dot layers, brand-tinted near layer. Pairs well with deep dark backgrounds.

<Starfield intensity="medium" />

DotGrid (hover me)

Cursor-reactive dot grid — the signature Galaxis effect. Brightens where you hover.

<DotGrid intensity="medium" />

OrbitRings

Concentric conic-gradient rings rotating with a comet arc. Centres focus behind hero content.

<OrbitRings intensity="medium" />

Hero

Flexible hero sections with multiple layouts, backgrounds, and slot-based content injection.

Split Layout Two-column with aside slot
New release

Build faster with Astro Galaxis

A modern starter kit for production websites.

Trusted by developers

Aside content slot

Centered Layout Single column, center-aligned
About us

We're on a mission

Building the tools developers love to use. Our team is dedicated to creating exceptional experiences.

Split Reverse Layout Aside on the left, content on the right
Reverse split

Aside on the left

Same two-column hero with the visual column flipped to the leading edge — useful when the artwork sets the mood before the copy.

Visual leads the eye

Orbit Background background="orbit"
Cosmic

Orbital focus

Concentric comet rings draw the eye to the centre.

Aurora Background background="aurora"
Cosmic

Aurora drift

Drifting brand-coloured blobs blur the section edges.

Terminal Aside Drop TerminalDemo into the aside slot for a developer-tools landing
For developers

Install in seconds

One command, perfect Lighthouse scores, ship in production today.

terminal
App Screenshot Aside Hero pattern for SaaS product landings
SaaS landing

Your dashboard, faster

Replace this placeholder with a real product screenshot — the aspect ratio holds whatever you drop in.

Code Typing Animated typing effect in the headline — great for dev tools
Dev experience

Built for

Strongly-typed, zero-config, and ready to deploy.

Logo Marquee Scrolling logo strip under the hero copy
Trusted by

Teams that ship faster

Drop your customer logos below the fold — readers know your product the moment they land.

Vercel Netlify Cloudflare Stripe Linear Supabase
Secondary Background

Secondary Background

Subtle elevation from the default background.

Gradient Background

Gradient Background

Smooth gradient transition effect.

Inverted Background Always dark, regardless of theme

Dark mode always

Perfect for CTAs and sections that need to stand out.

Join thousands of users

Size Variations sm, md, lg, xl padding options
size="sm"
Compact padding
size="md"
Default padding
size="lg"
Large padding
size="xl"
Extra-large padding
Available Props Simplified API (composition-first)

Props

  • layout centered | split
  • size sm | md | lg | xl
  • showGrid boolean

Slots

  • badge Use Badge component
  • title Use h1/h2 directly
  • description Use p directly
  • actions CTA buttons
  • aside Side content (split only)

Backgrounds: Use CSS classes for custom backgrounds (e.g., class="bg-surface-invert")

Bento Grid

Asymmetric Apple-style grid for premium feature sections. Cells set their own size (sm, md, tall, lg) and the parent grid handles the rest. Each cell glows brand-coloured on hover.

Perfect Lighthouse

Every page ships 100/100/100/100. Self-hosted fonts, image optimization, and zero runtime JS on static pages.

WCAG AA Themes

Four curated themes, every brand-on-background pairing verified by the contrast audit script.

Type-safe

Content collections with Zod schemas across the board.

Native i18n

Opt-in internationalization with locale-prefixed routes, hreflang tags, and a typed t() helper. Off by default — turn it on with one flag.

Cosmic backgrounds

Aurora, Starfield, DotGrid, OrbitRings — pure CSS, reduced-motion safe, themed by your active brand colour.

Astro 6

Latest Content Layer API and security primitives.

Layout

Header and Footer components for consistent page structure. Variant-based with full customization via design tokens.

Default Layout Logo left, nav + actions right-aligned
A Astro Galaxis
Minimal Layout Logo + CTA only, no navigation
A Astro Galaxis
Nav Only No CTA, no actions, just navigation
A Astro Galaxis
Size Variants sm (48px), md (56px), lg (64px)
size="sm" h-12 (48px) — compact
A Astro Galaxis
size="md" h-14 (56px) — default
A Astro Galaxis
size="lg" h-16 (64px) — spacious
A Astro Galaxis
Background Variants default, solid, transparent
variant="default" — backdrop blur + transparency
A Astro Galaxis
variant="solid" — opaque background
A Astro Galaxis
variant="transparent" — light background, dark text
A Astro Galaxis
variant="transparent" colorScheme="invert" — for dark backgrounds
A Astro Galaxis
Header Props Full API reference

Layout & Position

  • layout default | centered | minimal
  • position fixed | sticky | static
  • size sm | md | lg
  • variant default | solid | transparent
  • colorScheme default | invert

Navigation

  • nav NavItem[] (overrides routes)
  • extraNav NavItem[] (adds to routes)
  • showActiveState boolean
  • showMobileMenu boolean

Actions

  • showCta boolean
  • cta { label, href }
  • actions HeaderAction[]
  • showThemeToggle boolean
Footer - Simple Layout Single row with logo, nav, optional social
Minimal Layout Copyright only — perfect for simple sites

© 2026 Astro Galaxis

Stacked Layout Vertically stacked, centered — great for landing pages
Columns Layout Multi-column with link groups
Footer Props Full API reference

Layout

  • layout simple | columns | minimal | stacked
  • columns 2 | 3 | 4
  • background default | secondary | invert

Content

  • nav NavItem[]
  • linkGroups FooterLinkGroup[]
  • socialLinks SocialLink[]
  • tagline string

Copyright & Legal

  • showCopyright boolean
  • copyright string (supports {year}, {siteName})
  • legalLinks LegalLink[]
Navigation Design Tokens Customize via CSS custom properties

/* Customize nav link states in global.css */

--nav-link-color: var(--foreground-muted);

--nav-link-hover-color: var(--foreground);

--nav-link-hover-bg: var(--secondary);

--nav-link-active-color: var(--foreground);

--nav-link-active-bg: var(--secondary);

--nav-link-active-font-weight: 600;

CTA - Default Variant Light background with heading, description, and action buttons

Stop configuring. Start building.

Join the developers building faster, better websites with Astro Galaxis.

CTA - Invert Variant Dark background with inverted color scheme

Ready to build?

These components are just the beginning. Clone Astro Galaxis and start shipping faster.

CTA - Size Variants sm, md, lg, xl padding options

/* Size variants control vertical padding */

sm: 'py-16 md:py-20'

md: 'py-20 md:py-24'

lg: 'py-24 md:py-32' (default)

xl: 'py-32 md:py-40'

/* MaxWidth variants control content width */

sm: 'max-w-xl' | md: 'max-w-2xl' | lg: 'max-w-3xl' | xl: 'max-w-4xl'

Buttons

Interactive elements for actions and navigation. All variants support icons, loading states, and full accessibility.

Variants 6 styles for different contexts
Sizes Responsive scaling
States
With Icons

Form Inputs

Text fields, selects, checkboxes, and more. Built with native validation and ARIA support.

Text Input With labels & validation

Must be at least 8 characters

Input with Icons Leading & trailing icons
Textarea Multi-line text input

Supports markdown formatting

Select Native dropdown
Checkboxes Custom styled controls
Radio Buttons Single-select controls
Plan Selection Card-style radio options
Switch Toggle on/off states

Receive email alerts for important updates

Get product news and feature announcements

Receive text messages for critical events

Switch Sizes & States sm, md, lg + disabled

Feedback

Badges, alerts, and status indicators to communicate state and guide user actions.

Badges Status indicators
Default Success Warning Info
Alerts Contextual messages
Toast Notifications Click buttons to trigger toasts

Overlays

Dialogs, dropdowns, tooltips, and tabs. Full keyboard navigation and focus management.

Dialog Modal overlay
Dropdown Action menu
Tooltips Contextual hints
Tooltip on top Tooltip on bottom Tooltip on left Tooltip on right
Tabs Content organization

Project overview with key metrics and recent activity. Tabs support full keyboard navigation.

Analytics data with charts and performance insights. Press arrow keys to navigate between tabs.

Configure your project settings. Use Home/End to jump to first/last tab.

Data Display

Cards, avatars, and icons for presenting content and user information.

Card Variants 5 visual styles

Default

Standard bordered card

Solid

Filled background

Outline

Thick border, no fill

Ghost

Transparent container

Elevated

With shadow depth

Cards with Icons Compose your own layout with icon, title, description

Performance

100/100 Lighthouse

Zero JavaScript by default. Islands architecture with selective hydration for optimal speed.

Type-Safe

Full TypeScript

Strict types throughout with IDE autocompletion and compile-time error checking.

i18n Ready

Multi-language

Built-in translation system with SEO-friendly URLs and automatic locale detection.

Simple Cards Title and description only

Getting Started

Quick setup guide to get your project running in minutes.

Documentation

Comprehensive API reference and usage examples.

Community

Join our Discord server and connect with other developers.

Custom Layouts Stats, profiles, actions

Total Revenue

$45,231

+12.5% from last month

Sarah Chen Sarah Chen

Sarah Chen

Product Designer

Pro San Francisco, CA

astro-galaxis-app

Production deployment

Live
Avatars User representations
John Doe
xs
Jane Smith
sm
Alex Johnson
md
Sam Wilson
lg
Chris Lee
xl
User 1 User 1
User 2 User 2
User 3 User 3
+5
Stacked
Icons Lucide icon set — 24 included
menu
x
chevron-down
arrow-right
search
plus
check
mail
phone
github
twitter
linkedin
sun
moon
zap
globe
shield
code
heart
star
alert-circle
check-circle
info
loader
Separator Horizontal, vertical, and with labels

Horizontal (default)

With label

With label text

Vertical (in flex container)

Item 1 Item 2 Item 3
Table Styled data table with hover and striping
Name Email Role Status
Sarah Chen sarah@example.com Admin Active
Alex Johnson alex@example.com Editor Active
Sam Wilson sam@example.com Viewer Inactive
Striped & Compact Table Alternating rows with reduced padding
ID Product Price Stock
001 Astro Galaxis Pro $49 120
002 Astro Galaxis Team $99 85
003 Astro Galaxis Enterprise $249 42
004 Astro Galaxis Starter Free ∞
Avatar Group Stacked avatars with overflow

max=4, 6 avatars

User 1 User 1
User 2 User 2
User 3 User 3
User 4 User 4
+2

size="xs"

User 1 User 1
User 2 User 2
User 3 User 3
+1

size="sm"

User 1 User 1
User 2 User 2
User 3 User 3
+1

size="md"

User 1 User 1
User 2 User 2
User 3 User 3
+1

size="lg"

User 1 User 1
User 2 User 2
User 3 User 3
+1

Loading

Skeleton loaders for perceived performance while content is being fetched.

Skeleton Types Text, circular, rectangular
Card Skeleton Composite loading state
Progress Bar Determinate progress indicators

25% — default

60% — brand

90% — success

Color Variants All 5 at 70%
Size Variants sm, md, lg + indeterminate

size="sm"

size="md"

size="lg"

Indeterminate

Toggles

Accordion and expandable content patterns with native HTML details/summary.

Accordion - Default Collapsible FAQ sections
What is Astro Galaxis?
Astro Galaxis is a modern Astro starter template with Tailwind CSS v4, React islands, and a comprehensive component library. It includes everything you need to build production-ready websites.
Is it free to use?
Yes! Astro Galaxis is open source and completely free. You can use it for personal and commercial projects without any restrictions.
How do I customize the theme?
Astro Galaxis uses CSS custom properties (design tokens) for theming. Edit the token files in src/styles/tokens/ to customize colors, spacing, typography, and more.
Card Variant With one item open by default
Getting Started
Run the CLI scaffolding command to create a new project. Customize with flags like --demo, --components, and --i18n.
Deployment
Deploy to Vercel, Netlify, or any static host. The build output is optimized for performance out of the box.
Support
Join our GitHub discussions or file an issue for bugs and feature requests.
Exclusive Mode Only one item open at a time
Free Plan
Perfect for personal projects and learning. Includes all core components and basic templates.
Pro Plan
Advanced components, premium templates, priority support, and commercial license.
Enterprise
Custom development, dedicated support, SLA guarantees, and team training workshops.

Patterns

Pre-composed component patterns for common UI needs — search, passwords, stats, and empty states.

Search Input Input with search icon, multiple sizes
Password Input With show/hide toggle

Must be at least 8 characters

Password Sizes sm, md, lg
Stat Cards Metric display with trend indicators

Total Revenue

$45,231

+12.5% from last month

Active Users

2,338

+8.2% from last week

Bounce Rate

24.3%

-3.1% from last month

Avg. Session

3m 42s

No change
Empty State Placeholder for empty data views

No messages yet

When you receive messages, they'll appear here. Start a conversation to get going.

New Message

No results found

Try adjusting your search or filters to find what you're looking for.

Ready to build?

These components are just the beginning. Clone Astro Galaxis and start shipping faster.

Clone Repository Read Documentation