Documentation

Complete guide to using UILIB components in your Next.js projects.

Quick Start

1. Import components from the library

import { Button, Badge, Avatar } from '@/components'

2. Use them in your components

<Button variant="primary">Play Now</Button>
<Badge variant="solid">New</Badge>
<Avatar src="/avatar.png" size="lg" />

Headings, body text, gradient text

All button variants and sizes

Labels, indicators, and badges

Profile pictures and groups

Inputs, selects, and controls

Progress bars and animations

Content containers and cards

Leaderboards, achievements, profiles

Banners, toasts, and alerts

Tabs, breadcrumbs, pagination

All components are designed for dark mode interfaces with proper contrast and readability.

Components include game-inspired elements like glow effects, progress indicators, and achievement styles.

All styles use Tailwind CSS utilities for easy customization and consistent spacing.