GameApp UI Library

GameApp UI Library is a comprehensive and professional UI component library for React, specifically designed for gaming applications. It features a dark theme, glowing effects, and a variety of game-specific components to build beautiful and immersive game interfaces.

This library is built with React, Tailwind CSS, and Radix UI, providing a solid foundation for creating high-quality, accessible, and customizable UI components.

Features

• Comprehensive Component Library: A wide range of components, from basic atoms to complex organisms.
• Game-Specific Components: Specialized components like GamePanel, ClanPanel, BalancePanel, and more.
• Dark Theme with Glowing Effects: A visually appealing dark theme with glowing effects to create an immersive gaming experience.
• Customizable Design Tokens: Easily customize colors, typography, and spacing to match your game's branding.
• Built with Tailwind CSS: A utility-first CSS framework for rapid UI development.
• Powered by Radix UI: A collection of low-level UI primitives for building high-quality, accessible design systems.
• Lucide Icons: A beautiful and consistent icon set for icons.
• Responsive Design: Components are designed to work seamlessly across all screen sizes.

Installation

To use this UI library in your project, you can clone the repository and install the dependencies:

git clone https://github.com/your-username/gameapp-ui.git
cd gameapp-ui
pnpm install

To run the development server and see the components in action:

pnpm run dev

Open http://localhost:5173 in your browser to see the component showcase page with the component showcase page.

Components

This library includes a wide range of components, organized into atoms, molecules, and organisms.

Atoms

• Button: Various button styles, including primary, secondary, game, and gold buttons.
• Input: Different input fields, such as text, password, and search inputs.
• Avatar: User avatars with different sizes, variants, and status indicators.
• Badge: Badges for displaying status, rarity, levels, and notifications.
• Loader: Loading indicators, including spinners, dots, and progress bars.
• Typography: A set of typography components for headings, text, and game-specific text styles.

Molecules

• Card: A versatile card component with different variants for game, gold, and clan themes.
• GameCard: A specialized card for displaying game-related information, such as quests.
• PlayerCard: A card for displaying player information, including stats and avatar.
• StatsCard: A card for displaying key statistics with icons and percentage changes.

Organisms

• BalancePanel: A panel for displaying user balances, such as coins, gems, and stars.
• GamePanel: A comprehensive panel for displaying player information, including health, mana, and experience.
• ClanPanel: A panel for displaying clan information, including members, stats, and progress.
• GameStatusPanel: A panel for displaying the current game status, such as score, time, and round.

Customization

This UI library is highly customizable. You can modify the design tokens in the src/tokens directory to change the colors, typography, and spacing.

• Colors: src/tokens/colors.js
• Typography: src/tokens/typography.js
• Spacing: src/tokens/spacing.js

After modifying the tokens, the changes will be automatically applied to all components.