Article Card
Semantic HTML article with overflow handling for content.
Semantic
Component Library
Design System
Interactive showcase of reusable UI components with live examples and test builder
🎨 Component Test Builder
Mix and match components to create your own layouts
Interactive Component Builder
Click the buttons below to add components to your test area!
Your components will appear here... Start building! 🚀
🎯 Icon Component
Modern Lucide icons with consistent styling and better quality
Legacy Icons (Backward Compatible)
github
linkedin
mail
arrow-right
check
error
blog
briefcase
New Icons Available
user
settings
home
search
menu
heart
share
download
upload
edit
trash
lock
shield
zap
cloud
database
Size Examples
xs (12px)
sm (16px)
md (20px)
lg (24px)
xl (32px)
custom (48px)
💡 Click any icon to copy its usage code!
Powered by Lucide Icons - 1000+ beautiful, customizable SVG icons
🔘 Button Component
Versatile button system with multiple variants and states
Variants
Sizes
Interactive Examples
🪟 Glass Card Component
Beautiful glassmorphism cards with hover effects
Default Card
Standard glass card with subtle background and hover effects.
Hover me!
Section Card
Enhanced variant with emerald accents and larger padding.
Featured
📝 Form Components
Complete form system with validation and messaging
Form Messages
Success! Everything worked perfectly.
Oops! Something went wrong.
Here's some helpful information.
Please pay attention to this warning.
Form Fields
💻 Usage Examples
Copy-paste ready code snippets
Quick Start
// Import components
import Button from '@/components/ui/Button.astro';
import GlassCard from
'@/components/ui/GlassCard.astro';
import Icon from '@/components/ui/Icon.astro';
// Use in your templates
<GlassCard variant="section" hover=true>
<Button variant="primary">Click
me</Button>
<Icon name="github" size="lg" />
</GlassCard>
🎯 All components are fully typed with TypeScript interfaces
Read the Documentation