Design System

"text-purple-400">import { Button } "text-purple-400">from "text-green-400">'@/components/ui';

// Basic usage
<Button variant="primary" size="md">
  Click Me
</Button>

// With glow effect
<Button variant="primary" glow>
  Glowing Button
</Button>

// Beam variant (animated gradient border)
<Button variant="beam" size="lg">
  Premium Beam
</Button>

"text-purple-400">import { Badge } "text-purple-400">from "text-green-400">'@/components/ui';

<Badge variant="neon">New Feature</Badge>
<Badge variant="gradient" glow>Featured</Badge>

"text-purple-400">import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } "text-purple-400">from "text-green-400">'@/components/ui';

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Optional description</CardDescription>
  </CardHeader>
  <CardContent>
    Main content goes here
  </CardContent>
  <CardFooter>
    Footer content
  </CardFooter>
</Card>

"text-purple-400">import { GlassCard } "text-purple-400">from "text-green-400">'@/components/ui';

<GlassCard
  intensity="normal"
  hover="both"
  glow="primary"
  className="p-4"
>
  Content here
</GlassCard>

"text-purple-400">import { GradientBorder } "text-purple-400">from "text-green-400">'@/components/ui';

<GradientBorder
  gradient="rainbow"
  animate={true}
  speed="normal"
  className="p-4"
>
  Content with animated border
</GradientBorder>

"text-purple-400">import { ShimmerText } "text-purple-400">from "text-green-400">'@/components/ui';

<ShimmerText
  variant="rainbow"
  direction="diagonal"
  speed="normal"
  className="text-lg font-semibold"
>
  Animated Shimmer Text
</ShimmerText>

"text-purple-400">import { CountUp } "text-purple-400">from "text-green-400">'@/components/ui';

<CountUp
  value={99.9}
  suffix="%"
  decimals={1}
  duration={2}
/>

"text-purple-400">import { Magnetic } "text-purple-400">from "text-green-400">'@/components/ui';
"text-purple-400">import { Button } "text-purple-400">from "text-green-400">'@/components/ui';

<Magnetic strength={0.4}>
  <Button>Magnetic Button</Button>
</Magnetic>

"text-purple-400">import { GlowText } "text-purple-400">from "text-green-400">'@/components/ui';

<GlowText variant="pulse" color="primary">
  Glowing Text
</GlowText>

"text-purple-400">import { ToastProvider, useToast } "text-purple-400">from "text-green-400">'@/components/ui';

// Wrap your app
<ToastProvider>
  <App />
</ToastProvider>

// Use in component
"text-purple-400">function MyComponent() {
  "text-purple-400">const { showToast } = useToast();

  "text-purple-400">return (
    <button onClick={() => showToast("text-green-400">'Success!', "text-green-400">'success')}>
      Show Toast
    </button>
  );
}

"text-purple-400">import { Separator } "text-purple-400">from "text-green-400">'@/components/ui';

<Separator />
<Separator orientation="vertical" className="h-8" />

"text-purple-400">import { SearchInput } "text-purple-400">from "text-green-400">'@/components/search/SearchInput';
"text-purple-400">import { "text-blue-400">useState } "text-purple-400">from "text-green-400">'react';

"text-purple-400">function SearchExample() {
  "text-purple-400">const [searchValue, setSearchValue] = "text-blue-400">useState("text-green-400">'');

  "text-purple-400">return (
    <SearchInput
      value={searchValue}
      onChange={setSearchValue}
      placeholder="Search documentation..."
      debounceMs={300}
      autoFocus={true}
    />
  );
}