Raid Guild Logo

UI Components

Component Stack

The RaidGuild UI component library is built with Tailwind CSS and shadcn/ui, providing a comprehensive set of accessible, customizable components. This example demonstrates the components set up in a Next.js application, showcasing how to integrate the RaidGuild brand guidelines into your project.

Source Code

The complete component library, installation instructions, and brand guidelines are available on GitHub.

View on GitHub →

Getting Started

1. Install Required Dependencies

# Core dependencies
npm install class-variance-authority clsx lucide-react tailwind-merge

# Development dependencies
npm install -D @tailwindcss/postcss tw-animate-css

2. Add Font Files

Create a public/fonts/ directory and add the RaidGuild brand fonts:

  • MAZIUSREVIEW20.09-Regular.otf
  • MAZIUSREVIEW20.09-Regular.woff
  • EBGaramond-VariableFont_wght.ttf
  • EBGaramond-Italic-VariableFont_wght.ttf

Copy src/lib/fonts.ts into your project and update your src/app/layout.tsx to include the fonts.

3. Update Global CSS

Replace your src/app/globals.css with the RaidGuild brand styles from the globals.css file in this repo.

4. Add Components

Copy component files from src/components/ui/ into your project. Components are built with Radix UI primitives and styled with Tailwind CSS.

Note: You'll need to install the corresponding Radix UI packages for each component you use. For example, if you're using the Switch component, install @radix-ui/react-switch. Check each component's imports to see which Radix packages are required.

For detailed installation instructions and examples, see the README on GitHub.

5. Using with LLM Developer Agents

When working with LLM developer agents (Cursor, GitHub Copilot, ChatGPT, etc.), always include the UI Components Catalog in your prompt context. This ensures the agent knows what components are available and will use them instead of creating custom alternatives.

📄 Component Catalog Location

The complete catalog is available at:

docs/ui-components.mdFile on GitHub

✅ Best Practices

  • Add the catalog document to your prompt context at the start of each session
  • Reference specific components when asking for features
  • Verify the agent is using existing components before accepting code
  • Check the catalog for component combinations and patterns

The catalog includes detailed descriptions, usage examples, design tokens, and common patterns for all 42+ available components.