Skip to main content
System Components

UI Library

// Standardized interface elements for mission-critical applications.
// Status: ACTIVE

01. Card Components

Card <Card />

Basic card component with optional header, body, and footer slots

Card Title

This is a basic card with a title and description. Perfect for blog posts, products, or team members.

Gradient Card

Cards can have different variants like gradient backgrounds.

▶ View Props 
interface Props {
  title?: string;
  imageSrc?: string;
  imageAlt?: string;
  href?: string;
  class?: string;
}

ModernCard <ModernCard />

Enhanced card with hover effects, gradients, and modern styling

✨

Modern Design

Cards with gradient borders and smooth animations

🎨

Interactive

Hover effects and transform animations

▶ View Props 
interface Props {
  title?: string;
  description?: string;
  icon?: string;
  href?: string;
  variant?: 'default' | 'gradient' | 'glow';
  class?: string;
}

AdvancedCard <AdvancedCard />

Feature-rich card with badges, tags, actions, and advanced layouts

New

Advanced Features

Support for badges, tags, custom footers and more

Feature Premium
Popular

Customizable

Multiple variants and styling options

Flexible Modern
▶ View Props 
interface Props {
  title?: string;
  description?: string;
  badge?: string;
  tags?: string[];
  href?: string;
  variant?: 'default' | 'bordered' | 'elevated';
  class?: string;
}

02. Button Components

ModernButton <ModernButton />

Modern button with gradients, glows, and advanced hover effects

▶ View Props 
interface Props {
  variant?: 'gradient' | 'glow' | 'shine' | 'pulse';
  size?: 'sm' | 'md' | 'lg';
  href?: string;
  class?: string;
}

03. Animation Components

Animate <Animate />

Basic reveal animation using Intersection Observer

Fade in animation
Slide up animation
▶ View Props 
interface Props {
  animation?: 'fade' | 'slide-up' | 'slide-down' | 'slide-left' | 'slide-right';
  delay?: number;
  duration?: number;
  class?: string;
}

ModernAnimate <ModernAnimate />

Enhanced animations with spring physics and advanced easing

▶ View Props 
interface Props {
  animation?: 'bounce' | 'scale' | 'rotate' | 'flip';
  delay?: number;
  duration?: number;
  easing?: 'ease' | 'spring' | 'bounce';
  class?: string;
}

04. Layout Components

Grid <Grid />

Responsive grid with configurable columns and gaps

Item 1
Item 2
Item 3
▶ View Props 
interface Props {
  cols?: number | { sm?: number; md?: number; lg?: number };
  gap?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
  class?: string;
}

05. Utility Components

ThemeToggle <ThemeToggle />

Theme switcher with localStorage persistence and system preference detection

▶ View Props 
interface Props {
  variant?: 'icon' | 'button' | 'dropdown';
  showLabel?: boolean;
}

LazyImage <LazyImage />

Performant lazy loading with Intersection Observer and blur placeholder

Demo image
▶ View Props 
interface Props {
  src: string;
  alt: string;
  width?: number;
  height?: number;
  class?: string;
  loading?: 'lazy' | 'eager';
  blurHash?: string;
  sizes?: string;
  srcset?: string;
}

Icon <Icon />

SVG icon component with customizable size and color

▶ View Props 
interface Props {
  name: string;
  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
  class?: string;
}

Usage Guidelines

Import Components 

---
import Card from '../components/ui/Card.astro';
import Button from '../components/ui/Button.astro';
---

Use in Templates 

<Card title="My Card">
  <p>Card content goes here</p>
</Card>

<Button variant="primary" href="/contact">
  Get Started
</Button>

Customize with Classes 

<Card class="hover:scale-105 transition-transform">
  Custom styling
</Card>
🚀 TRY_DEMO