Warcraft III-Themed UI Components with shadcn/ui

warcraftcn/ui is an open-source component library that implements the visual design language of Warcraft III for your React/Shadcn applications.

The project builds on the shadcn/ui component architecture. You can install individual components through the shadcn CLI. Each component lands in your source directory as editable code.

GitHub

Documentation

Features

⚔️ Warcraft III Visual Style: Components replicate the interface design from the original game with authentic colors, borders, and typography patterns.

🎮 Seven Core Components: Includes Badge, Button, Card, Dropdown Menu, Input, Skeleton, and Textarea components ready for production use.

📦 Copy-Paste Architecture: Components install directly into your codebase through the shadcn CLI.

⚡ Framework Compatibility: Works with React, Next.js, Remix, and other modern React frameworks.

🎨 Full Customization: Components exist as source files in your project. You can adjust styles and logic without library constraints.

🔧 Modern Tooling: Built with TypeScript and Tailwind CSS for type safety and utility-first styling.

Use Cases

Gaming Community Platforms: Build forums, clan websites, or tournament dashboards with an authentic Warcraft aesthetic that resonates with the player base.
Fan Project Interfaces: Create tools, calculators, or database sites for Warcraft III content with UI components that match the game’s visual identity.
Nostalgia-Driven Applications: Develop retro-styled web apps or landing pages that leverage the distinctive RTS interface design for visual impact.

How to Use It

1. Install components individually using the shadcn CLI. The CLI downloads the Badge component into your project’s components directory.

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

2. Repeat this process for each component you need.

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

3. Import the component from your local components directory after installation. The path matches your project’s component structure.

import { Badge } from "@/components/ui/warcraftcn/badge";
export default function Example() {
  return <Badge>Badge</Badge>;
}

4. All UI Components:

Badge: Displays status indicators, labels, or counts with a thematic border.
Button: Triggers actions or form submissions. It supports click handlers and standard button attributes.
Card: Acts as a container for content. It applies the classic stone texture background and gold borders.
Dropdown Menu: Reveals a list of actions or options when triggered.
Input: Captures user text data. It styles the text field to match the game’s input boxes.
Skeleton: Shows a placeholder state while content loads.
Textarea: Captures multi-line text input.

Related Resources

shadcn/ui: Component collection that forms the architecture foundation for this library.
Radix UI: Unstyled primitive components used as the base layer for complex interactive elements.
Tailwind CSS: Utility-first CSS framework that handles the styling system.

FAQs

Q: Can I modify the component styles after installation?
A: Yes. Components install as source files in your project directory. You can edit the Tailwind classes, adjust variants, or change any styling logic directly in the component files.

Q: Do I need to install all components at once?
A: No. The CLI lets you install components individually. Add only the components your project needs to keep the codebase minimal.

Q: Does this work with TypeScript projects?
A: Yes. All components include TypeScript definitions. The shadcn CLI handles TypeScript configuration during installation.

Q: How do I update components when new versions release?
A: Run the same CLI command again to reinstall a component. This overwrites the existing file with the updated version. Back up any custom modifications first.

Q: Can I use these components with non-React frameworks?
A: No. The components require React. The library builds on React-specific patterns like hooks and JSX. You need a React-compatible framework like Next.js, Remix, or plain React.