UI Components
UI Components
25 components for building user interfaces.
Button
Action buttons with multiple variants.
Sizes
With Links
Badge
Status indicators and labels.
Card
Content cards with optional links.
Learn how to set up Astroria Docs in your project.
CardGrid
Grid layout for multiple cards.
Install via npm, pnpm, or yarn
Set up astro.config.mjs
Write MDX documentation
Ship to Cloudflare Pages
Three Columns
<1s FCP
WCAG 2.1 AA
100/100 score
Hero
Landing page hero sections.
Build Beautiful Docs
ThemeToggle
Dark/light mode toggle button.
ThemeSwitcher
Color theme picker (5 presets).
Footer
Site footer with links and branding. See live example at page bottom.
Component: @components/ui/Footer.astro
Avatar
User avatars with image/initials fallback.
With Initials
AvatarGroup
Stacked avatar groups with overflow count.
Skeleton
Loading placeholders.
Spinner
Loading spinner animation.
Toast
Toast notifications.
Success!
Your changes have been saved successfully.
Error
Failed to save changes. Please try again.
Warning
Your session will expire in 5 minutes.
New updates available. Refresh to see changes.
Alert
Alert messages with variants.
Information
This is an informational alert message.
Success
Operation completed successfully!
Warning
Please review your changes before continuing.
Error
An error occurred while processing your request.
Chip
Small status/tag chips.
Divider
Section dividers with optional labels.
EmptyState
Empty state placeholders.
Modal
Dialog overlay component.
Dropdown
Dropdown select menu.
Tooltip
Hover tooltips.
Popover
Popover content.
ProgressSteps
Step progress indicator.
ToggleSwitch
Toggle switch input.
CheckboxGroup
Checkbox group input.
RadioGroup
Radio button group input.