The Library.

<button className="px-6 py-2.5 rounded-xl bg-primary text-primary-foreground font-bold flex items-center gap-2 hover:scale-[1.02] active:scale-[0.98] transition-all shadow-lg shadow-primary/20">
  <Sparkles className="w-4 h-4" />
  Primary Button
</button>

<button className="px-6 py-2.5 rounded-xl bg-secondary text-secondary-foreground font-bold hover:bg-secondary/80 transition-all active:scale-95">
  Secondary Button
</button>

<button className="px-6 py-2.5 rounded-xl border-2 border-primary bg-transparent text-foreground font-bold hover:bg-primary/10 transition-all">
  Outline Button
</button>

<button className="px-6 py-2.5 rounded-xl bg-transparent text-foreground font-bold hover:bg-primary/10 transition-all">
  Ghost Button
</button>

<button disabled className="px-6 py-2.5 rounded-xl bg-primary text-primary-foreground font-bold flex items-center gap-2 opacity-50">
  <div className="h-4 w-4 rounded-full border-2 border-primary-foreground border-t-transparent animate-spin" />
  Loading
</button>

<div className="bg-white border border-slate-200 p-8 rounded-[2rem] shadow-sm hover:border-primary/50 transition-all">
  <h3 className="text-xl font-bold mb-1">Card Title</h3>
  <p className="text-sm text-slate-500 mb-4">Subtitle</p>
  <p className="text-sm text-slate-600">Card content</p>
</div>

<div className="bg-card border border-border rounded-[2rem] overflow-hidden">
  <div className="px-8 py-6 border-b border-border flex justify-between items-center">
    <div>
      <h3 className="text-lg font-bold">Header Title</h3>
      <p className="text-[10px] uppercase font-black text-muted-foreground">Categorized</p>
    </div>
  </div>
  <div className="p-8 text-sm text-muted-foreground">Card body content...</div>
</div>

<div className="p-6 rounded-[2rem] bg-card border border-border shadow-sm group hover:border-primary/50 transition-all">
  <p className="text-xs font-black uppercase tracking-widest text-muted-foreground mb-4">Total Revenue</p>
  <div className="flex items-end justify-between">
    <h3 className="text-3xl font-black tracking-tighter text-foreground group-hover:text-primary transition-colors">$45,231.89</h3>
    <div className="text-emerald-500 text-[10px] font-black uppercase tracking-widest flex items-center gap-1">
      <span>↑</span> 20.1%
    </div>
  </div>
  <div className="mt-6 h-1.5 w-full bg-muted rounded-full overflow-hidden">
    <div className="h-full bg-primary w-[65%]"></div>
  </div>
</div>

<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
  <div className="absolute inset-0 bg-background/80 backdrop-blur-sm" />
  <div className="relative w-full max-w-lg bg-card border border-border rounded-[2.5rem] shadow-2xl p-8 overflow-hidden">
    <div className="flex flex-col items-center text-center space-y-4">
      <div className="w-12 h-12 rounded-2xl bg-primary/10 flex items-center justify-center text-primary mb-2">
        <AlertCircle className="w-6 h-6" />
      </div>
      <h3 className="text-2xl font-black tracking-tight">Are you sure?</h3>
      <p className="text-sm text-muted-foreground leading-relaxed max-w-sm">
        This action cannot be undone. This will permanently delete your account.
      </p>
    </div>
    <div className="flex flex-col sm:flex-row gap-3 mt-10">
      <button className="flex-1 px-6 py-2.5 rounded-2xl border border-input font-bold text-sm hover:bg-accent transition-all">
        Cancel
      </button>
      <button className="flex-1 px-6 py-2.5 rounded-2xl bg-primary text-primary-foreground font-bold text-sm shadow-lg shadow-primary/20 hover:scale-[1.02] active:scale-[0.98] transition-all">
        Confirm
      </button>
    </div>
  </div>
</div>