# Introduction



Welcome to warcraftcn-ui [#welcome-to-warcraftcn-ui]

**warcraftcn-ui** is an open-source UI component library that brings the iconic visual style of classic Warcraft III to modern web applications. Whether you're building a fan project, a gaming community site, or just want that nostalgic RTS aesthetic, this library has you covered.

What is warcraftcn-ui? [#what-is-warcraftcn-ui]

This project provides a collection of beautifully crafted UI components inspired by the timeless design language of Warcraft III

All components are designed to be **copy-paste ready** and work seamlessly with modern frameworks like React, Next.js, and more.


# Components



Code Block [#code-block]

```js
console.log('Hello World');
```

Cards [#cards]

<Cards>
  <Card title="Learn more about Next.js" href="https://nextjs.org/docs" />

  <Card title="Learn more about Fumadocs" href="https://fumadocs.dev" />
</Cards>


# Accordion





<Accordion type="single" defaultValue="The fall" className="max-w-lg mx-auto">
  <AccordionItem value="The fall">
    <AccordionTrigger icon="rune-stone">
      The Fall of Lordaeron
    </AccordionTrigger>

    <AccordionContent>
      Prince Arthas Menethil returned home not as a savior, but as the harbinger
      of ruin. Under the influence of Frostmourne, he marched upon his own
      kingdom. The capital of Lordaeron fell in a single night, its banners
      burned and its people raised into undeath. Thus began the reign of the
      Scourge in the Eastern Kingdoms.
    </AccordionContent>
  </AccordionItem>

  <AccordionItem value="The Rise of the Lich King">
    <AccordionTrigger icon="sword">
      The Rise of the Lich King
    </AccordionTrigger>

    <AccordionContent>
      High atop the Frozen Throne, the spirit of Ner’zhul awaited its chosen
      champion. Arthas ascended the icy spire and shattered the prison of the
      Lich King, donning the Helm of Domination. In that moment, the prince and
      the orc shaman became one being — the Lich King — ruler of the Scourge and
      master of death.
    </AccordionContent>
  </AccordionItem>

  <AccordionItem value="The Battle of Mount Hyjal">
    <AccordionTrigger icon="shield">
      The Battle of Mount Hyjal
    </AccordionTrigger>

    <AccordionContent>
      As Archimonde and the Burning Legion sought to claim the World Tree, an
      unlikely alliance formed. Humans, Orcs, and Night Elves stood united
      against annihilation. Upon the slopes of Mount Hyjal, sacrifice and
      strategy turned the tide, and the Legion’s invasion was shattered in
      arcane fire and ancient magic.
    </AccordionContent>
  </AccordionItem>
</Accordion>

Installation [#installation]

```bash
pnpm dlx shadcn@latest add https://warcraftcn.com/r/accordion.json
```

Usage [#usage]

```tsx
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/warcraftcn/accordion";

<Accordion type="single" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>Warchief Orders</AccordionTrigger>
    <AccordionContent>
      Build a stronghold quickly, then strike enemy outposts before they can
      fortify.
    </AccordionContent>
  </AccordionItem>
</Accordion>;
```


# Avatar





Default [#default]

<div className="flex flex-row gap-2">
  <Avatar alt="Human Peasant" faction="default" size="sm" src="/warcraftcn/human-peasant.webp" />

  <Avatar alt="Human Peasant" faction="default" size="md" src="/warcraftcn/human-peasant.webp" />

  <Avatar alt="Human Peasant" faction="default" size="lg" src="/warcraftcn/human-peasant.webp" />
</div>

Orc Faction [#orc-faction]

<div className="flex flex-row gap-2">
  <Avatar alt="Orc Hero" faction="orc" size="sm" src="/warcraftcn/orc-hero.webp" />

  <Avatar alt="Orc Hero" faction="orc" size="md" src="/warcraftcn/orc-hero.webp" />

  <Avatar alt="Orc Hero" faction="orc" size="lg" src="/warcraftcn/orc-hero.webp" />
</div>

Elf Faction [#elf-faction]

<div className="flex flex-row gap-2">
  <Avatar alt="Elf Hero" faction="elf" size="sm" src="/warcraftcn/elf-hero.webp" />

  <Avatar alt="Elf Hero" faction="elf" size="md" src="/warcraftcn/elf-hero.webp" />

  <Avatar alt="Elf Hero" faction="elf" size="lg" src="/warcraftcn/elf-hero.webp" />
</div>

Human Faction [#human-faction]

<div className="flex flex-row gap-2">
  <Avatar alt="Human Hero" faction="human" size="sm" src="/warcraftcn/human-hero.webp" />

  <Avatar alt="Human Hero" faction="human" size="md" src="/warcraftcn/human-hero.webp" />

  <Avatar alt="Human Hero" faction="human" size="lg" src="/warcraftcn/human-hero.webp" />
</div>

Undead Faction [#undead-faction]

<div className="flex flex-row gap-2">
  <Avatar alt="Undead Hero" faction="undead" size="sm" src="/warcraftcn/undead-hero.webp" />

  <Avatar alt="Undead Hero" faction="undead" size="md" src="/warcraftcn/undead-hero.webp" />

  <Avatar alt="Undead Hero" faction="undead" size="lg" src="/warcraftcn/undead-hero.webp" />
</div>

Installation [#installation]

```bash
pnpm dlx shadcn@latest add https://warcraftcn.com/r/avatar.json
```

Usage [#usage]

```tsx
import { Avatar } from "@/components/ui/warcraftcn/avatar";

export default function AvatarExample () {
  return (
    <div className="flex flex-row gap-2">
      <Avatar alt="Human Peasant" faction="default" size="sm" src="/warcraftcn/human-peasant.webp" />
      <Avatar alt="Orc Hero" faction="orc" size="md" src="/warcraftcn/orc-hero.webp" />
      <Avatar alt="Elf Hero" faction="elf" size="lg" src="/warcraftcn/elf-hero.webp" />
      <Avatar alt="Human Hero" faction="human" size="lg" src="/warcraftcn/human-hero.webp" />
      <Avatar alt="Undead Hero" faction="undead" size="lg" src="/warcraftcn/undead-hero.webp" />
    </div>
  );
}
      
```


# Badge





Standard [#standard]

<Badge>
  Default
</Badge>

<Badge variant="secondary">
  Secondary
</Badge>

<Badge variant="destructive">
  Destructive
</Badge>

<Badge variant="outline">
  Outline
</Badge>

Installation [#installation]

```bash
pnpm dlx shadcn@latest add https://warcraftcn.com/r/badge.json
```

Usage [#usage]

```tsx
import { Badge } from "@/components/ui/warcraftcn/badge";

<Badge>Badge</Badge>;
```


# Button





Standard [#standard]

<Button className="min-w-xs">
  CAMPAIGN
</Button>

With Frame [#with-frame]

<Button variant="frame" className="text-2xl min-w-sm">
  CAMPAIGN
</Button>

Installation [#installation]

```bash
pnpm dlx shadcn@latest add https://warcraftcn.com/r/button.json
```

Usage [#usage]

```tsx
import { Button } from "@/components/ui/warcraftcn/button";

<Button>Button</Button>;
```


# Card





Standard [#standard]

<Card className="max-w-lg min-h-[40rem]">
  <CardHeader>
    <CardTitle>
      Arthas Menethil
    </CardTitle>

    <CardDescription>
      Prince of Lordaeron
    </CardDescription>
  </CardHeader>

  <CardContent className="text-white">
    The former Crown Prince of Lordaeron, who became the Lich King after taking
    up the cursed blade Frostmourne.
  </CardContent>

  <CardFooter className="flex items-center justify-center">
    <Button size="sm">
      View Profile
    </Button>
  </CardFooter>
</Card>

Installation [#installation]

```bash
pnpm dlx shadcn@latest add https://warcraftcn.com/r/card.json
```

Usage [#usage]

```tsx
import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from "@/components/ui/warcraftcn/card";

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card description</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Card content goes here.</p>
  </CardContent>
  <CardFooter>
    <p>Card footer</p>
  </CardFooter>
</Card>;
```


# Checkbox





Default [#default]

<Checkbox faction="default" id="doc-default">
  Accept terms and conditions
</Checkbox>

Human Faction [#human-faction]

<Checkbox faction="human" id="doc-human">
  Accept terms and conditions
</Checkbox>

Orc Faction [#orc-faction]

<Checkbox faction="orc" id="doc-orc">
  Accept terms and conditions
</Checkbox>

Elf Faction [#elf-faction]

<Checkbox faction="elf" id="doc-elf">
  Accept terms and conditions
</Checkbox>

Undead Faction [#undead-faction]

<Checkbox faction="undead" id="doc-undead">
  Accept terms and conditions
</Checkbox>

Disabled [#disabled]

<Checkbox faction="default" id="doc-disabled">
  Locked setting
</Checkbox>

Installation [#installation]

```bash
pnpm dlx shadcn@latest add https://warcraftcn.com/r/checkbox.json
```

Usage [#usage]

```tsx
import { Checkbox } from "@/components/ui/warcraftcn/checkbox";
```

```tsx
<Checkbox faction="default" id="terms">
  Accept terms and conditions
</Checkbox>
```

Faction Variants [#faction-variants]

```tsx
<Checkbox faction="human">Human theme</Checkbox>
<Checkbox faction="orc">Orc theme</Checkbox>
<Checkbox faction="elf">Elf theme</Checkbox>
<Checkbox faction="undead">Undead theme</Checkbox>
```

Disabled State [#disabled-state]

```tsx
<Checkbox faction="default" disabled>
  Locked setting
</Checkbox>
```


# Cursor





Orc Faction [#orc-faction]

<Cursor faction="orc">
  <div className="flex flex-col md:flex-row gap-2">
    <Card>
      <CardHeader className="text-white text-center">
        <CardTitle className="text-xl font-bold text-yellow-400">
          Blademaster
        </CardTitle>

        <CardDescription className="text-gray-300 text-sm">
          Orc Hero
        </CardDescription>
      </CardHeader>

      <CardContent className="flex justify-center">
        <Avatar alt="Orc Hero Blademaster" faction="orc" src="/warcraftcn/orc-hero-1.webp" />
      </CardContent>

      <CardFooter>
        <Button variant="frame" className="w-full">
          Select Hero
        </Button>
      </CardFooter>
    </Card>

    <Card>
      <CardHeader className="text-white text-center">
        <CardTitle className="text-xl font-bold text-yellow-400">
          Shadow Hunter
        </CardTitle>

        <CardDescription className="text-gray-300 text-sm">
          Orc Hero
        </CardDescription>
      </CardHeader>

      <CardContent className="flex justify-center">
        <Avatar alt="Orc Hero Shadow Hunter" faction="orc" src="/warcraftcn/orc-hero-2.webp" />
      </CardContent>

      <CardFooter>
        <Button variant="frame" className="w-full">
          Select Hero
        </Button>
      </CardFooter>
    </Card>

    <Card>
      <CardHeader className="text-white text-center">
        <CardTitle className="text-xl font-bold text-yellow-400">
          Far Seer
        </CardTitle>

        <CardDescription className="text-gray-300 text-sm">
          Orc Hero
        </CardDescription>
      </CardHeader>

      <CardContent className="flex justify-center">
        <Avatar alt="Orc Hero Far Seer" faction="orc" src="/warcraftcn/orc-hero-3.webp" />
      </CardContent>

      <CardFooter>
        <Button variant="frame" className="w-full">
          Select Hero
        </Button>
      </CardFooter>
    </Card>
  </div>
</Cursor>

Elf Faction [#elf-faction]

<Cursor faction="elf">
  <div className="flex flex-col md:flex-row gap-2">
    <Card>
      <CardHeader className="text-white text-center">
        <CardTitle className="text-xl font-bold text-yellow-400">
          Warden
        </CardTitle>

        <CardDescription className="text-gray-300 text-sm">
          Elf Hero
        </CardDescription>
      </CardHeader>

      <CardContent className="flex justify-center">
        <Avatar alt="Elf Hero Warden" faction="elf" src="/warcraftcn/elf-hero-1.webp" />
      </CardContent>

      <CardFooter>
        <Button variant="frame" className="w-full">
          Select Hero
        </Button>
      </CardFooter>
    </Card>

    <Card>
      <CardHeader className="text-white text-center">
        <CardTitle className="text-xl font-bold text-yellow-400">
          Grove Keeper
        </CardTitle>

        <CardDescription className="text-gray-300 text-sm">
          Elf Hero
        </CardDescription>
      </CardHeader>

      <CardContent className="flex justify-center">
        <Avatar alt="Elf Hero Grove Keeper" faction="elf" src="/warcraftcn/elf-hero-2.webp" />
      </CardContent>

      <CardFooter>
        <Button variant="frame" className="w-full">
          Select Hero
        </Button>
      </CardFooter>
    </Card>

    <Card>
      <CardHeader className="text-white text-center">
        <CardTitle className="text-xl font-bold text-yellow-400">
          Demon Hunter
        </CardTitle>

        <CardDescription className="text-gray-300 text-sm">
          Elf Hero
        </CardDescription>
      </CardHeader>

      <CardContent className="flex justify-center">
        <Avatar alt="Elf Hero Demon Hunter" faction="elf" src="/warcraftcn/elf-hero-3.webp" />
      </CardContent>

      <CardFooter>
        <Button variant="frame" className="w-full">
          Select Hero
        </Button>
      </CardFooter>
    </Card>
  </div>
</Cursor>

Human Faction [#human-faction]

<Cursor faction="human">
  <div className="flex flex-col md:flex-row gap-2">
    <Card>
      <CardHeader className="text-white text-center">
        <CardTitle className="text-xl font-bold text-yellow-400">
          Blood Mage
        </CardTitle>

        <CardDescription className="text-gray-300 text-sm">
          Human Hero
        </CardDescription>
      </CardHeader>

      <CardContent className="flex justify-center">
        <Avatar alt="Human Hero Blood Mage" faction="human" src="/warcraftcn/human-hero-1.webp" />
      </CardContent>

      <CardFooter>
        <Button variant="frame" className="w-full">
          Select Hero
        </Button>
      </CardFooter>
    </Card>

    <Card>
      <CardHeader className="text-white text-center">
        <CardTitle className="text-xl font-bold text-yellow-400">
          Archmage
        </CardTitle>

        <CardDescription className="text-gray-300 text-sm">
          Human Hero
        </CardDescription>
      </CardHeader>

      <CardContent className="flex justify-center">
        <Avatar alt="Human Hero Archmage" faction="human" src="/warcraftcn/human-hero-2.webp" />
      </CardContent>

      <CardFooter>
        <Button variant="frame" className="w-full">
          Select Hero
        </Button>
      </CardFooter>
    </Card>

    <Card>
      <CardHeader className="text-white text-center">
        <CardTitle className="text-xl font-bold text-yellow-400">
          Mountain King
        </CardTitle>

        <CardDescription className="text-gray-300 text-sm">
          Human Hero
        </CardDescription>
      </CardHeader>

      <CardContent className="flex justify-center">
        <Avatar alt="Human Hero Mountain King" faction="human" src="/warcraftcn/human-hero-3.webp" />
      </CardContent>

      <CardFooter>
        <Button variant="frame" className="w-full">
          Select Hero
        </Button>
      </CardFooter>
    </Card>
  </div>
</Cursor>

Undead Faction [#undead-faction]

<Cursor faction="undead">
  <div className="flex flex-col md:flex-row gap-2">
    <Card>
      <CardHeader className="text-white text-center">
        <CardTitle className="text-xl font-bold text-yellow-400">
          Dread Lord
        </CardTitle>

        <CardDescription className="text-gray-300 text-sm">
          Undead Hero
        </CardDescription>
      </CardHeader>

      <CardContent className="flex justify-center">
        <Avatar alt="Undead Hero Dread Lord" faction="undead" src="/warcraftcn/undead-hero-1.webp" />
      </CardContent>

      <CardFooter>
        <Button variant="frame" className="w-full">
          Select Hero
        </Button>
      </CardFooter>
    </Card>

    <Card>
      <CardHeader className="text-white text-center">
        <CardTitle className="text-xl font-bold text-yellow-400">
          Lich
        </CardTitle>

        <CardDescription className="text-gray-300 text-sm">
          Undead Hero
        </CardDescription>
      </CardHeader>

      <CardContent className="flex justify-center">
        <Avatar alt="Undead Hero Lich" faction="undead" src="/warcraftcn/undead-hero-2.webp" />
      </CardContent>

      <CardFooter>
        <Button variant="frame" className="w-full">
          Select Hero
        </Button>
      </CardFooter>
    </Card>

    <Card>
      <CardHeader className="text-white text-center">
        <CardTitle className="text-xl font-bold text-yellow-400">
          Death Knight
        </CardTitle>

        <CardDescription className="text-gray-300 text-sm">
          Undead Hero
        </CardDescription>
      </CardHeader>

      <CardContent className="flex justify-center">
        <Avatar alt="Undead Hero Death Knight" faction="undead" src="/warcraftcn/undead-hero-3.webp" />
      </CardContent>

      <CardFooter>
        <Button variant="frame" className="w-full">
          Select Hero
        </Button>
      </CardFooter>
    </Card>
  </div>
</Cursor>

Installation [#installation]

```bash
pnpm dlx shadcn@latest add https://warcraftcn.com/r/cursor.json
```

Usage [#usage]

```tsx
import { Cursor } from "@/components/ui/warcraftcn/cursor";
export default function CursorExample () {
  return (
    <Cursor faction="undead">  
      ....
    </Cursor>
  );
}
```


# Dropdown Menu





Standard [#standard]

<DropdownMenu>
  <DropdownMenuTrigger>
    <Button className="flex gap-2 w-64 md:w-96">
      Select Class
    </Button>
  </DropdownMenuTrigger>

  <DropdownMenuContent className="w-64 md:w-96">
    <DropdownMenuLabel>
      Choose Your Path
    </DropdownMenuLabel>

    <DropdownMenuSeparator />

    <DropdownMenuItem className="flex gap-2">
      <Sword className="size-4" />

      <div>
        Warrior
      </div>
    </DropdownMenuItem>

    <DropdownMenuItem className="flex gap-2">
      <Shield className="size-4" />

      <div>
        Paladin
      </div>
    </DropdownMenuItem>

    <DropdownMenuItem className="flex gap-2">
      <Wand2 className="size-4" />

      <div>
        Mage
      </div>
    </DropdownMenuItem>

    <DropdownMenuItem className="flex gap-2">
      <Heart className="size-4" />

      <div>
        Priest
      </div>
    </DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Installation [#installation]

```bash
pnpm dlx shadcn@latest add https://warcraftcn.com/r/dropdown-menu.json
```

Usage [#usage]

```tsx
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/warcraftcn/dropdown-menu";
import { Button } from "@/components/ui/warcraftcn/button";

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button>Open Menu</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuLabel>Actions</DropdownMenuLabel>
    <DropdownMenuSeparator />
    <DropdownMenuItem>Profile</DropdownMenuItem>
    <DropdownMenuItem>Settings</DropdownMenuItem>
    <DropdownMenuItem>Logout</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>;
```


# Components



<Cards>
  <Card title="Accordion" description="A Warcraft styled accordion component" href="/docs/components/accordion" />

  <Card title="Avatar" description="Hero or unit portrait component in Warcraft style" href="/docs/components/avatar" />

  <Card title="Badge" description="Classic Warcraft badge" href="/docs/components/badge" />

  <Card title="Button" description="Classic Warcraft button" href="/docs/components/button" />

  <Card title="Card" description="Epic Card" href="/docs/components/card" />

  <Card title="Checkbox" description="Warcraft faction-themed checkbox component" href="/docs/components/checkbox" />

  <Card title="Cursor" description="A Warcraft-themed cursor component" href="/docs/components/cursor" />

  <Card title="Dropdown Menu" description="Fantasy dropdown with border-image frames" href="/docs/components/dropdown-menu" />

  <Card title="Input" description="Classic Input" href="/docs/components/input" />

  <Card title="Label" description="Warcraft-themed label for form inputs" href="/docs/components/label" />

  <Card title="Pagination" description="Warcraft-themed pagination component" href="/docs/components/pagination" />

  <Card title="Radio Group" description="Gem socket radio buttons with gold glow" href="/docs/components/radio-group" />

  <Card title="Skeleton" description="Loading placeholder with faction themes" href="/docs/components/skeleton" />

  <Card title="Spinner" description="Fantasy loading spinner" href="/docs/components/spinner" />

  <Card title="Tabs" description="Epic tabbed navigation" href="/docs/components/tabs" />

  <Card title="Textarea" description="Fantasy Textarea" href="/docs/components/textarea" />

  <Card title="Toast" description="Warcraft-themed toast notification" href="/docs/components/toast" />

  <Card title="Tooltip" description="Warcraft-themed tooltip with rarity variants" href="/docs/components/tooltip" />
</Cards>


# Input





Standard [#standard]

<Input className="w-96" placeholder="Enter your name..." />

Installation [#installation]

```bash
pnpm dlx shadcn@latest add https://warcraftcn.com/r/input.json
```

Usage [#usage]

```tsx
import { Input } from "@/components/ui/warcraftcn/input";

<Input placeholder="Enter your name..." />;
```


# Label





Standard [#standard]

<div className="flex flex-col gap-2">
  <Label htmlFor="character">
    Character Name
  </Label>

  <Input id="character" className="w-96" placeholder="Enter your character name..." />
</div>

Required [#required]

<div className="flex flex-col gap-2">
  <Label htmlFor="realm">
    Realm
  </Label>

  <Input id="realm" className="w-96" placeholder="Select your realm..." />
</div>

Disabled [#disabled]

<div className="flex flex-col gap-2">
  <Label htmlFor="locked">
    Locked Field
  </Label>

  <Input id="locked" className="w-96" placeholder="This field is locked" />
</div>

Muted [#muted]

<div className="flex flex-col gap-2">
  <Label htmlFor="optional" variant="muted">
    Optional Note
  </Label>

  <Input id="optional" className="w-96" placeholder="Additional notes..." />
</div>

Installation [#installation]

```bash
pnpm dlx shadcn@latest add https://warcraftcn.com/r/label.json
```

Usage [#usage]

```tsx
import { Label } from "@/components/ui/warcraftcn/label";

<Label htmlFor="email">Your Email</Label>
```

With Required Indicator [#with-required-indicator]

```tsx
<Label htmlFor="name" required>Character Name</Label>
```

Disabled State [#disabled-state]

```tsx
<Label htmlFor="locked" disabled>Locked Field</Label>
```


# Pagination





Standard Pagination [#standard-pagination]

<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious href="#" />
    </PaginationItem>

    <PaginationItem>
      <PaginationLink href="#">
        1
      </PaginationLink>
    </PaginationItem>

    <PaginationItem>
      <PaginationLink href="#">
        2
      </PaginationLink>
    </PaginationItem>

    <PaginationItem>
      <PaginationLink href="#">
        3
      </PaginationLink>
    </PaginationItem>

    <PaginationItem>
      <PaginationEllipsis />
    </PaginationItem>

    <PaginationItem>
      <PaginationNext href="#" />
    </PaginationItem>
  </PaginationContent>
</Pagination>

```tsx
<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious href="#" />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">1</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#" isActive>
        2
      </PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">3</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationEllipsis />
    </PaginationItem>
    <PaginationItem>
      <PaginationNext href="#" />
    </PaginationItem>
  </PaginationContent>
</Pagination>
```

Disabled Navigation Bounds [#disabled-navigation-bounds]

<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious />
    </PaginationItem>

    <PaginationItem>
      <PaginationLink href="#">
        1
      </PaginationLink>
    </PaginationItem>

    <PaginationItem>
      <PaginationLink href="#">
        2
      </PaginationLink>
    </PaginationItem>

    <PaginationItem>
      <PaginationLink href="#">
        3
      </PaginationLink>
    </PaginationItem>

    <PaginationItem>
      <PaginationNext href="#" />
    </PaginationItem>
  </PaginationContent>
</Pagination>

```tsx
<Pagination>
  <PaginationContent>
    <PaginationItem>
      {/* Disable the previous button since we are on the first page */}
      <PaginationPrevious disabled />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#" isActive>
        1
      </PaginationLink>
    </PaginationItem>
    {/* ... */}
  </PaginationContent>
</Pagination>
```

Installation [#installation]

```bash
pnpm dlx shadcn@latest add https://warcraftcn.com/r/pagination.json
```

Usage [#usage]

```tsx
import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/warcraftcn/pagination";
```

```tsx
<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious href="#" />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">1</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationEllipsis />
    </PaginationItem>
    <PaginationItem>
      <PaginationNext href="#" />
    </PaginationItem>
  </PaginationContent>
</Pagination>
```


# Radio Group





Default [#default]

<RadioGroup defaultValue="warrior">
  <div className="flex items-center gap-3">
    <RadioGroupItem value="warrior" id="doc-warrior" />

    <Label htmlFor="doc-warrior">
      Warrior
    </Label>
  </div>

  <div className="flex items-center gap-3">
    <RadioGroupItem value="mage" id="doc-mage" />

    <Label htmlFor="doc-mage">
      Mage
    </Label>
  </div>

  <div className="flex items-center gap-3">
    <RadioGroupItem value="hunter" id="doc-hunter" />

    <Label htmlFor="doc-hunter">
      Hunter
    </Label>
  </div>
</RadioGroup>

Horizontal [#horizontal]

<RadioGroup defaultValue="normal" orientation="horizontal">
  <div className="flex items-center gap-3">
    <RadioGroupItem value="easy" id="doc-easy" />

    <Label htmlFor="doc-easy">
      Easy
    </Label>
  </div>

  <div className="flex items-center gap-3">
    <RadioGroupItem value="normal" id="doc-normal" />

    <Label htmlFor="doc-normal">
      Normal
    </Label>
  </div>

  <div className="flex items-center gap-3">
    <RadioGroupItem value="hard" id="doc-hard" />

    <Label htmlFor="doc-hard">
      Hard
    </Label>
  </div>
</RadioGroup>

Disabled [#disabled]

<RadioGroup defaultValue="alliance">
  <div className="flex items-center gap-3">
    <RadioGroupItem value="alliance" id="doc-alliance" />

    <Label htmlFor="doc-alliance">
      Alliance
    </Label>
  </div>

  <div className="flex items-center gap-3">
    <RadioGroupItem value="horde" id="doc-horde" />

    <Label htmlFor="doc-horde">
      Horde
    </Label>
  </div>
</RadioGroup>

Installation [#installation]

```bash
pnpm dlx shadcn@latest add https://warcraftcn.com/r/radio-group.json
```

Usage [#usage]

```tsx
import {
  RadioGroup,
  RadioGroupItem,
} from "@/components/ui/warcraftcn/radio-group";
import { Label } from "@/components/ui/warcraftcn/label";

<RadioGroup defaultValue="option-one">
  <div className="flex items-center gap-3">
    <RadioGroupItem value="option-one" id="option-one" />
    <Label htmlFor="option-one">Option One</Label>
  </div>
  <div className="flex items-center gap-3">
    <RadioGroupItem value="option-two" id="option-two" />
    <Label htmlFor="option-two">Option Two</Label>
  </div>
</RadioGroup>;
```

Horizontal Orientation [#horizontal-orientation]

```tsx
<RadioGroup defaultValue="a" orientation="horizontal">
  <div className="flex items-center gap-3">
    <RadioGroupItem value="a" id="a" />
    <Label htmlFor="a">Option A</Label>
  </div>
  <div className="flex items-center gap-3">
    <RadioGroupItem value="b" id="b" />
    <Label htmlFor="b">Option B</Label>
  </div>
</RadioGroup>
```

Disabled State [#disabled-state]

```tsx
<RadioGroup defaultValue="locked" disabled>
  <div className="flex items-center gap-3">
    <RadioGroupItem value="locked" id="locked" />
    <Label htmlFor="locked" disabled>
      Locked Option
    </Label>
  </div>
</RadioGroup>
```


# Skeleton





Default [#default]

<div className="flex items-center gap-4">
  <Skeleton className="size-12" variant="circular" />

  <div className="space-y-2 flex-1">
    <Skeleton className="h-4 w-64" />

    <Skeleton className="h-4 w-48" />
  </div>
</div>

Orc Faction [#orc-faction]

<div className="flex items-center gap-4">
  <Skeleton faction="orc" className="size-12" variant="circular" />

  <div className="space-y-2 flex-1">
    <Skeleton faction="orc" className="h-4 w-64" />

    <Skeleton faction="orc" className="h-4 w-48" />
  </div>
</div>

Elf Faction [#elf-faction]

<div className="flex items-center gap-4">
  <Skeleton faction="elf" className="size-12" variant="circular" />

  <div className="space-y-2 flex-1">
    <Skeleton faction="elf" className="h-4 w-64" />

    <Skeleton faction="elf" className="h-4 w-48" />
  </div>
</div>

Human Faction [#human-faction]

<div className="flex items-center gap-4">
  <Skeleton faction="human" className="size-12" variant="circular" />

  <div className="space-y-2 flex-1">
    <Skeleton faction="human" className="h-4 w-64" />

    <Skeleton faction="human" className="h-4 w-48" />
  </div>
</div>

Undead Faction [#undead-faction]

<div className="flex items-center gap-4">
  <Skeleton faction="undead" className="size-12" variant="circular" />

  <div className="space-y-2 flex-1">
    <Skeleton faction="undead" className="h-4 w-64" />

    <Skeleton faction="undead" className="h-4 w-48" />
  </div>
</div>

Installation [#installation]

```bash
pnpm dlx shadcn@latest add https://warcraftcn.com/r/skeleton.json
```

Usage [#usage]

```tsx
import { Skeleton } from "@/components/ui/warcraftcn/skeleton";

<Skeleton className="h-12 w-full" />;
```

Shapes [#shapes]

```tsx
// Default rectangular shape
<Skeleton className="h-12 w-full" />

// Circular shape (for avatars)
<Skeleton variant="circular" className="size-12" />
```

Factions [#factions]

```tsx
// Orc - red/brown with axe icons
<Skeleton faction="orc" className="h-12 w-full" />

// Elf - teal/green with leaf icons
<Skeleton faction="elf" className="h-12 w-full" />

// Human - blue with shield icons
<Skeleton faction="human" className="h-12 w-full" />

// Undead - purple with skull icons
<Skeleton faction="undead" className="h-12 w-full" />
```


# Spinner





Standard [#standard]

<div className="flex items-center gap-6">
  <Spinner className="size-6" />

  <Spinner className="size-8" />

  <Spinner />

  <Spinner className="size-14" />

  <Spinner className="size-16" />
</div>

Installation [#installation]

```bash
pnpm dlx shadcn@latest add https://warcraftcn.com/r/spinner.json
```

Usage [#usage]

```tsx
import { Spinner } from "@/components/ui/warcraftcn/spinner";

<Spinner />
```

Size [#size]

```tsx
<Spinner className="size-6" />
<Spinner className="size-10" />
<Spinner className="size-14" />
```

In Buttons [#in-buttons]

```tsx
import { Button } from "@/components/ui/warcraftcn/button";
import { Spinner } from "@/components/ui/warcraftcn/spinner";

<Button disabled className="w-56">
  <Spinner className="size-5" />
  Summoning...
</Button>;
```

Use Cases [#use-cases]

Button Loading State [#button-loading-state]

<Button className="w-64">
  <Spinner className="size-6" />

  Summoning...
</Button>

Badge Status [#badge-status]

<div className="flex items-center gap-4">
  <Badge>
    <Spinner className="size-4" />

    Syncing
  </Badge>

  <Badge variant="secondary">
    <Spinner className="size-6" />

    Updating
  </Badge>
</div>

Input Prefix [#input-prefix]

<div className="max-w-sm">
  <div className="relative">
    <Spinner className="size-4 absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none" />

    <Input className="pl-10" placeholder="Channeling necromancy..." />
  </div>
</div>

Card Processing State [#card-processing-state]

<Card className="max-w-lg">
  <CardHeader>
    <CardTitle>
      Ritual Queue
    </CardTitle>

    <CardDescription>
      Preparing structure for summoning.
    </CardDescription>
  </CardHeader>

  <CardContent className="flex items-center justify-between mb-4">
    <span>
      Altar of Darkness
    </span>

    <Spinner className="size-8" />
  </CardContent>
</Card>


# Tabs





Default (No Faction) [#default-no-faction]

<Tabs defaultValue="orc" className="w-[600px]">
  <TabsList>
    <TabsTrigger value="orc">
      Orc
    </TabsTrigger>

    <TabsTrigger value="human">
      Human
    </TabsTrigger>

    <TabsTrigger value="elf">
      Elf
    </TabsTrigger>

    <TabsTrigger value="undead">
      Undead
    </TabsTrigger>

    <TabsTrigger value="disabled">
      Disabled
    </TabsTrigger>
  </TabsList>

  <TabsContent value="orc">
    <div style="{ color: &#x22;#fff&#x22; }">
      <ul>
        <li>
          Fierce warriors forged in battle.
        </li>

        <li>
          Homeland: Durotar
        </li>
      </ul>
    </div>
  </TabsContent>

  <TabsContent value="human">
    <div style="{ color: &#x22;#fff&#x22; }">
      <ul>
        <li>
          Defenders of 

          <span style="{ color: &#x22;#dbeafe&#x22; }">Azeroth</span>

           and champions of the Alliance.
        </li>

        <li>
          Highly adaptable; masters of magic and sword.
        </li>
      </ul>
    </div>
  </TabsContent>

  <TabsContent value="elf">
    <div style="{ color: &#x22;#fff&#x22; }">
      <ul>
        <li>
          Mystical guardians of the forests.
        </li>

        <li>
          Possess ancient knowledge & magical prowess.
        </li>
      </ul>
    </div>
  </TabsContent>

  <TabsContent value="undead">
    <div style="{ color: &#x22;#fff&#x22; }">
      <ul>
        <li>
          Ruthless minions of the Lich King.
        </li>

        <li>
          Wield dark magic and necromantic abilities.
        </li>
      </ul>
    </div>
  </TabsContent>
</Tabs>

<Tabs defaultValue="orc" orientation="vertical" className="w-[400px] mt-10">
  <TabsList>
    <TabsTrigger value="orc">
      Orc
    </TabsTrigger>

    <TabsTrigger value="human">
      Human
    </TabsTrigger>

    <TabsTrigger value="elf">
      Elf
    </TabsTrigger>

    <TabsTrigger value="undead">
      Undead
    </TabsTrigger>

    <TabsTrigger value="disabled">
      Disabled
    </TabsTrigger>
  </TabsList>

  <TabsContent value="orc">
    <div style="{ color: &#x22;#fff&#x22; }">
      <ul>
        <li>
          Fierce warriors forged in battle.
        </li>

        <li>
          Homeland: Durotar
        </li>
      </ul>
    </div>
  </TabsContent>

  <TabsContent value="human">
    <div style="{ color: &#x22;#fff&#x22; }">
      <ul>
        <li>
          Defenders of 

          <span>Azeroth</span>

           and champions of the Alliance.
        </li>

        <li>
          Highly adaptable; masters of magic and sword.
        </li>
      </ul>
    </div>
  </TabsContent>

  <TabsContent value="elf">
    <div style="{ color: &#x22;#fff&#x22; }">
      <ul>
        <li>
          Mystical guardians of the forests.
        </li>

        <li>
          Possess ancient knowledge & magical prowess.
        </li>
      </ul>
    </div>
  </TabsContent>

  <TabsContent value="undead">
    <div style="{ color: &#x22;#fff&#x22; }">
      <ul>
        <li>
          Ruthless minions of the Lich King.
        </li>

        <li>
          Wield dark magic and necromantic abilities.
        </li>
      </ul>
    </div>
  </TabsContent>
</Tabs>

Human Faction [#human-faction]

<Tabs defaultValue="human" className="w-[600px] mt-10" faction="human">
  <TabsList>
    <TabsTrigger value="orc">
      Orc
    </TabsTrigger>

    <TabsTrigger value="human">
      Human
    </TabsTrigger>

    <TabsTrigger value="elf">
      Elf
    </TabsTrigger>

    <TabsTrigger value="undead">
      Undead
    </TabsTrigger>

    <TabsTrigger value="disabled">
      Disabled
    </TabsTrigger>
  </TabsList>

  <TabsContent value="orc">
    <div style="{ color: &#x22;#fff&#x22; }">
      <ul>
        <li>
          Enemies to human civilization.
        </li>

        <li>
          Renowned for raw power and raid tactics.
        </li>
      </ul>
    </div>
  </TabsContent>

  <TabsContent value="human">
    <div style="{ color: &#x22;#fff&#x22; }">
      <ul>
        <li>
          The noble defenders of Azeroth.
        </li>

        <li>
          Mastery over the sword and arcane.
        </li>
      </ul>
    </div>
  </TabsContent>

  <TabsContent value="elf">
    <div style="{ color: &#x22;#fff&#x22; }">
      <ul>
        <li>
          Trusted ancient allies.
        </li>

        <li>
          Command wisdom and magic.
        </li>
      </ul>
    </div>
  </TabsContent>

  <TabsContent value="undead">
    <div style="{ color: &#x22;#fff&#x22; }">
      <ul>
        <li>
          Sworn foes, bringers of darkness.
        </li>

        <li>
          Once-humans corrupted by undeath.
        </li>
      </ul>
    </div>
  </TabsContent>
</Tabs>

<Tabs defaultValue="human" className="w-[600px] mt-10" faction="human" orientation="vertical">
  <TabsList>
    <TabsTrigger value="orc">
      Orc
    </TabsTrigger>

    <TabsTrigger value="human">
      Human
    </TabsTrigger>

    <TabsTrigger value="elf">
      Elf
    </TabsTrigger>

    <TabsTrigger value="undead">
      Undead
    </TabsTrigger>

    <TabsTrigger value="disabled">
      Disabled
    </TabsTrigger>
  </TabsList>

  <TabsContent value="orc">
    <div style="{ color: &#x22;#fff&#x22; }">
      <ul>
        <li>
          Enemies to human civilization.
        </li>

        <li>
          Renowned for raw power and raid tactics.
        </li>
      </ul>
    </div>
  </TabsContent>

  <TabsContent value="human">
    <div style="{ color: &#x22;#fff&#x22; }">
      <ul>
        <li>
          The noble defenders of Azeroth.
        </li>

        <li>
          Mastery over the sword and arcane.
        </li>
      </ul>
    </div>
  </TabsContent>

  <TabsContent value="elf">
    <div style="{ color: &#x22;#fff&#x22; }">
      <ul>
        <li>
          Trusted ancient allies.
        </li>

        <li>
          Command wisdom and magic.
        </li>
      </ul>
    </div>
  </TabsContent>

  <TabsContent value="undead">
    <div style="{ color: &#x22;#fff&#x22; }">
      <ul>
        <li>
          Sworn foes, bringers of darkness.
        </li>

        <li>
          Once-humans corrupted by undeath.
        </li>
      </ul>
    </div>
  </TabsContent>
</Tabs>

Orc Faction [#orc-faction]

<Tabs defaultValue="orc" className="w-[600px] mt-10" faction="orc">
  <TabsList>
    <TabsTrigger value="orc">
      Orc
    </TabsTrigger>

    <TabsTrigger value="human">
      Human
    </TabsTrigger>

    <TabsTrigger value="elf">
      Elf
    </TabsTrigger>

    <TabsTrigger value="undead">
      Undead
    </TabsTrigger>

    <TabsTrigger value="disabled">
      Disabled
    </TabsTrigger>
  </TabsList>

  <TabsContent value="orc">
    <div style="{ color: &#x22;#fff&#x22; }">
      <ul>
        <li>
          Fearless warriors from Durotar.
        </li>

        <li>
          Masters of the axe and war drum.
        </li>
      </ul>
    </div>
  </TabsContent>

  <TabsContent value="human">
    <div style="{ color: &#x22;#fff&#x22; }">
      <ul>
        <li>
          Traditional rivals; skilled in fortification.
        </li>

        <li>
          Survivors of countless conflicts.
        </li>
      </ul>
    </div>
  </TabsContent>

  <TabsContent value="elf">
    <div style="{ color: &#x22;#fff&#x22; }">
      <ul>
        <li>
          Mysterious magic and archery skills.
        </li>

        <li>
          Elusive allies and foes in equal measure.
        </li>
      </ul>
    </div>
  </TabsContent>

  <TabsContent value="undead">
    <div style="{ color: &#x22;#fff&#x22; }">
      <ul>
        <li>
          Dreadful forces risen against the living.
        </li>

        <li>
          Corrupted by the Lich King's influence.
        </li>
      </ul>
    </div>
  </TabsContent>
</Tabs>

<Tabs defaultValue="orc" className="w-[600px] mt-10" faction="orc" orientation="vertical">
  <TabsList>
    <TabsTrigger value="orc">
      Orc
    </TabsTrigger>

    <TabsTrigger value="human">
      Human
    </TabsTrigger>

    <TabsTrigger value="elf">
      Elf
    </TabsTrigger>

    <TabsTrigger value="undead">
      Undead
    </TabsTrigger>

    <TabsTrigger value="disabled">
      Disabled
    </TabsTrigger>
  </TabsList>

  <TabsContent value="orc">
    <div style="{ color: &#x22;#fff&#x22; }">
      <ul>
        <li>
          Fearless warriors from Durotar.
        </li>

        <li>
          Masters of the axe and war drum.
        </li>
      </ul>
    </div>
  </TabsContent>

  <TabsContent value="human">
    <div style="{ color: &#x22;#fff&#x22; }">
      <ul>
        <li>
          Traditional rivals; skilled in fortification.
        </li>

        <li>
          Survivors of countless conflicts.
        </li>
      </ul>
    </div>
  </TabsContent>

  <TabsContent value="elf">
    <div style="{ color: &#x22;#fff&#x22; }">
      <ul>
        <li>
          Mysterious magic and archery skills.
        </li>

        <li>
          Elusive allies and foes in equal measure.
        </li>
      </ul>
    </div>
  </TabsContent>

  <TabsContent value="undead">
    <div style="{ color: &#x22;#fff&#x22; }">
      <ul>
        <li>
          Dreadful forces risen against the living.
        </li>

        <li>
          Corrupted by the Lich King's influence.
        </li>
      </ul>
    </div>
  </TabsContent>
</Tabs>

Elf Faction [#elf-faction]

<Tabs defaultValue="elf" className="w-[600px] mt-10" faction="elf">
  <TabsList>
    <TabsTrigger value="orc">
      Orc
    </TabsTrigger>

    <TabsTrigger value="human">
      Human
    </TabsTrigger>

    <TabsTrigger value="elf">
      Elf
    </TabsTrigger>

    <TabsTrigger value="undead">
      Undead
    </TabsTrigger>

    <TabsTrigger value="disabled">
      Disabled
    </TabsTrigger>
  </TabsList>

  <TabsContent value="orc">
    <div style="{ color: &#x22;#fff&#x22; }">
      <ul>
        <li>
          Respect forest might, but follow their own way.
        </li>

        <li>
          Conflicted alliances with the elves.
        </li>
      </ul>
    </div>
  </TabsContent>

  <TabsContent value="human">
    <div style="{ color: &#x22;#fff&#x22; }">
      <ul>
        <li>
          Staunch defenders of civilization and order.
        </li>

        <li>
          Sometimes distrust elven secrecy.
        </li>
      </ul>
    </div>
  </TabsContent>

  <TabsContent value="elf">
    <div style="{ color: &#x22;#fff&#x22; }">
      <ul>
        <li>
          The ancient, magical Kaldorei.
        </li>

        <li>
          Guardians of the Emerald Dream.
        </li>
      </ul>
    </div>
  </TabsContent>

  <TabsContent value="undead">
    <div style="{ color: &#x22;#fff&#x22; }">
      <ul>
        <li>
          Bane of all living things.
        </li>

        <li>
          Dark magics threaten elven forests.
        </li>
      </ul>
    </div>
  </TabsContent>
</Tabs>

<Tabs defaultValue="elf" className="w-[600px] mt-10" faction="elf" orientation="vertical">
  <TabsList>
    <TabsTrigger value="orc">
      Orc
    </TabsTrigger>

    <TabsTrigger value="human">
      Human
    </TabsTrigger>

    <TabsTrigger value="elf">
      Elf
    </TabsTrigger>

    <TabsTrigger value="undead">
      Undead
    </TabsTrigger>

    <TabsTrigger value="disabled">
      Disabled
    </TabsTrigger>
  </TabsList>

  <TabsContent value="orc">
    <div style="{ color: &#x22;#fff&#x22; }">
      <ul>
        <li>
          Respect forest might, but follow their own way.
        </li>

        <li>
          Conflicted alliances with the elves.
        </li>
      </ul>
    </div>
  </TabsContent>

  <TabsContent value="human">
    <div style="{ color: &#x22;#fff&#x22; }">
      <ul>
        <li>
          Staunch defenders of civilization and order.
        </li>

        <li>
          Sometimes distrust elven secrecy.
        </li>
      </ul>
    </div>
  </TabsContent>

  <TabsContent value="elf">
    <div style="{ color: &#x22;#fff&#x22; }">
      <ul>
        <li>
          The ancient, magical Kaldorei.
        </li>

        <li>
          Guardians of the Emerald Dream.
        </li>
      </ul>
    </div>
  </TabsContent>

  <TabsContent value="undead">
    <div style="{ color: &#x22;#fff&#x22; }">
      <ul>
        <li>
          Bane of all living things.
        </li>

        <li>
          Dark magics threaten elven forests.
        </li>
      </ul>
    </div>
  </TabsContent>
</Tabs>

Undead Faction [#undead-faction]

<Tabs defaultValue="undead" className="w-[600px] mt-10" faction="undead">
  <TabsList>
    <TabsTrigger value="orc">
      Orc
    </TabsTrigger>

    <TabsTrigger value="human">
      Human
    </TabsTrigger>

    <TabsTrigger value="elf">
      Elf
    </TabsTrigger>

    <TabsTrigger value="undead">
      Undead
    </TabsTrigger>

    <TabsTrigger value="disabled">
      Disabled
    </TabsTrigger>
  </TabsList>

  <TabsContent value="orc">
    <div style="{ color: &#x22;#fff&#x22; }">
      <ul>
        <li>
          Stand at odds with the undead's blight.
        </li>
      </ul>
    </div>
  </TabsContent>

  <TabsContent value="human">
    <div style="{ color: &#x22;#fff&#x22; }">
      <ul>
        <li>
          Terrorized by the undead like no other.
        </li>

        <li>
          Great losses in Lordaeron's fall.
        </li>
      </ul>
    </div>
  </TabsContent>

  <TabsContent value="elf">
    <div style="{ color: &#x22;#fff&#x22; }">
      <ul>
        <li>
          Lands corrupted, groves despoiled.
        </li>

        <li>
          Bitter enemies of the Scourge.
        </li>
      </ul>
    </div>
  </TabsContent>

  <TabsContent value="undead">
    <div style="{ color: &#x22;#fff&#x22; }">
      <ul>
        <li>
          Servants of the Lich King, risen from the grave.
        </li>

        <li>
          Seek to spread undeath across Azeroth.
        </li>
      </ul>
    </div>
  </TabsContent>
</Tabs>

<Tabs defaultValue="undead" className="w-[600px] mt-10" faction="undead" orientation="vertical">
  <TabsList>
    <TabsTrigger value="orc">
      Orc
    </TabsTrigger>

    <TabsTrigger value="human">
      Human
    </TabsTrigger>

    <TabsTrigger value="elf">
      Elf
    </TabsTrigger>

    <TabsTrigger value="undead">
      Undead
    </TabsTrigger>

    <TabsTrigger value="disabled">
      Disabled
    </TabsTrigger>
  </TabsList>

  <TabsContent value="orc">
    <div style="{ color: &#x22;#fff&#x22; }">
      <ul>
        <li>
          Stand at odds with the undead's blight.
        </li>
      </ul>
    </div>
  </TabsContent>

  <TabsContent value="human">
    <div style="{ color: &#x22;#fff&#x22; }">
      <ul>
        <li>
          Terrorized by the undead like no other.
        </li>

        <li>
          Great losses in Lordaeron's fall.
        </li>
      </ul>
    </div>
  </TabsContent>

  <TabsContent value="elf">
    <div style="{ color: &#x22;#fff&#x22; }">
      <ul>
        <li>
          Lands corrupted, groves despoiled.
        </li>

        <li>
          Bitter enemies of the Scourge.
        </li>
      </ul>
    </div>
  </TabsContent>

  <TabsContent value="undead">
    <div style="{ color: &#x22;#fff&#x22; }">
      <ul>
        <li>
          Servants of the Lich King, risen from the grave.
        </li>

        <li>
          Seek to spread undeath across Azeroth.
        </li>
      </ul>
    </div>
  </TabsContent>
</Tabs>

Installation [#installation]

```bash
pnpm dlx shadcn@latest add https://warcraftcn.com/r/tabs.json
```

Usage [#usage]

```tsx
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/warcraftcn/tabs"

<Tabs defaultValue="orc">
  <TabsList>
    <TabsTrigger value="orc">Orc</TabsTrigger>
    <TabsTrigger value="human">Human</TabsTrigger>
    <TabsTrigger value="elf">Elf</TabsTrigger>
    <TabsTrigger value="undead">Undead</TabsTrigger>
    <TabsTrigger value="disabled" disabled>Disabled</TabsTrigger>
  </TabsList>
  <TabsContent value="orc">
  </TabsContent>
  <TabsContent value="human">
  </TabsContent>
</Tabs>
```


# Textarea





Standard [#standard]

<Textarea className="max-w-sm" rows="10" placeholder="Enter your message to the Warchief..." />

With Default Value [#with-default-value]

<Textarea className="max-w-sm" defaultValue="For the Horde! Our forces are ready to march on command." />

Installation [#installation]

```bash
pnpm dlx shadcn@latest add https://warcraftcn.com/r/textarea.json
```

Usage [#usage]

```tsx
import { Textarea } from "@/components/ui/warcraftcn/textarea";

<Textarea className="max-w-sm" rows="10" placeholder="Enter text..." />;
```


# Toast





<ToastExample />

Installation [#installation]

```bash
pnpm dlx shadcn@latest add https://warcraftcn.com/r/toast.json
```

Usage [#usage]

```tsx
import { triggerScrollToast } from "@/components/ui/warcraftcn/toast";
import { Button } from "@/components/ui/warcraftcn/button";

export default function ToastExample() {
  return (
    <Button
        variant="frame"
        onClick={() => triggerScrollToast({ message: "This is test" })}
        className="w-[200px] md:min-w-xs py-3 px-6"
    >
      Show Toast
    </Button>
  );
}
```


# Tooltip





<Tooltip>
  <TooltipTrigger>
    <Button className="w-64 md:w-96">
      Hover
    </Button>
  </TooltipTrigger>

  <TooltipContent>
    <TooltipTitle>
      Hearthstone
    </TooltipTitle>

    <TooltipBody>
      Binds when picked up
    </TooltipBody>
  </TooltipContent>
</Tooltip>

Examples [#examples]

Default [#default]

<Tooltip>
  <TooltipTrigger>
    <Button className="w-64 md:w-96">
      Default
    </Button>
  </TooltipTrigger>

  <TooltipContent>
    <TooltipTitle>
      Hearthstone
    </TooltipTitle>

    <TooltipBody>
      Binds when picked up
    </TooltipBody>
  </TooltipContent>
</Tooltip>

```tsx
<Tooltip>
  <TooltipTrigger asChild>
    <Button>Default</Button>
  </TooltipTrigger>
  <TooltipContent>
    <TooltipTitle>Hearthstone</TooltipTitle>
    <TooltipBody>Binds when picked up</TooltipBody>
  </TooltipContent>
</Tooltip>
```

Uncommon [#uncommon]

<Tooltip>
  <TooltipTrigger>
    <Button className="w-64 md:w-96">
      Uncommon
    </Button>
  </TooltipTrigger>

  <TooltipContent variant="uncommon">
    <TooltipTitle>
      Outrunner's Cloak
    </TooltipTitle>

    <TooltipBody>
      Binds when equipped
    </TooltipBody>
  </TooltipContent>
</Tooltip>

```tsx
<TooltipContent variant="uncommon">
  <TooltipTitle>Outrunner's Cloak</TooltipTitle>
  <TooltipBody>Binds when equipped</TooltipBody>
</TooltipContent>
```

Rare [#rare]

<Tooltip>
  <TooltipTrigger>
    <Button className="w-64 md:w-96">
      Rare
    </Button>
  </TooltipTrigger>

  <TooltipContent variant="rare">
    <TooltipTitle>
      Azuresong Mageblade
    </TooltipTitle>

    <TooltipBody>
      Binds when picked up
    </TooltipBody>
  </TooltipContent>
</Tooltip>

```tsx
<TooltipContent variant="rare">
  <TooltipTitle>Azuresong Mageblade</TooltipTitle>
  <TooltipBody>Binds when picked up</TooltipBody>
</TooltipContent>
```

Epic [#epic]

<Tooltip>
  <TooltipTrigger>
    <Button className="w-64 md:w-96">
      Epic
    </Button>
  </TooltipTrigger>

  <TooltipContent variant="epic">
    <TooltipTitle>
      Ashbringer
    </TooltipTitle>

    <TooltipBody>
      Binds when picked up
    </TooltipBody>
  </TooltipContent>
</Tooltip>

```tsx
<TooltipContent variant="epic">
  <TooltipTitle>Ashbringer</TooltipTitle>
  <TooltipBody>Binds when picked up</TooltipBody>
</TooltipContent>
```

Legendary [#legendary]

<Tooltip>
  <TooltipTrigger>
    <Button className="w-64 md:w-96">
      Legendary
    </Button>
  </TooltipTrigger>

  <TooltipContent variant="legendary">
    <TooltipTitle>
      Thunderfury
    </TooltipTitle>

    <TooltipBody>
      Binds when picked up
    </TooltipBody>
  </TooltipContent>
</Tooltip>

```tsx
<TooltipContent variant="legendary">
  <TooltipTitle>Thunderfury</TooltipTitle>
  <TooltipBody>Binds when picked up</TooltipBody>
</TooltipContent>
```

Side [#side]

Use the `side` prop to change the position of the tooltip.

<div className="flex flex-wrap gap-2">
  <Tooltip>
    <TooltipTrigger>
      <Button>
        Left
      </Button>
    </TooltipTrigger>

    <TooltipContent side="left">
      <p>
        Left side
      </p>
    </TooltipContent>
  </Tooltip>

  <Tooltip>
    <TooltipTrigger>
      <Button>
        Top
      </Button>
    </TooltipTrigger>

    <TooltipContent side="top">
      <p>
        Top side
      </p>
    </TooltipContent>
  </Tooltip>

  <Tooltip>
    <TooltipTrigger>
      <Button>
        Bottom
      </Button>
    </TooltipTrigger>

    <TooltipContent side="bottom">
      <p>
        Bottom side
      </p>
    </TooltipContent>
  </Tooltip>

  <Tooltip>
    <TooltipTrigger>
      <Button>
        Right
      </Button>
    </TooltipTrigger>

    <TooltipContent side="right">
      <p>
        Right side
      </p>
    </TooltipContent>
  </Tooltip>
</div>

```tsx
<TooltipContent side="left">
  <p>Left side</p>
</TooltipContent>

<TooltipContent side="top">
  <p>Top side</p>
</TooltipContent>

<TooltipContent side="bottom">
  <p>Bottom side</p>
</TooltipContent>

<TooltipContent side="right">
  <p>Right side</p>
</TooltipContent>
```

Installation [#installation]

```bash
pnpm dlx shadcn@latest add https://warcraftcn.com/r/tooltip.json
```

Usage [#usage]

```tsx
import {
  Tooltip,
  TooltipBody,
  TooltipContent,
  TooltipTitle,
  TooltipTrigger,
} from "@/components/ui/warcraftcn/tooltip";
```

```tsx
<Tooltip>
  <TooltipTrigger>Hover</TooltipTrigger>
  <TooltipContent>
    <TooltipTitle>Item Name</TooltipTitle>
    <TooltipBody>Item description</TooltipBody>
  </TooltipContent>
</Tooltip>
```