npm package: @sokol_001/gameapp-ui
Description: Comprehensive UI component library for gaming applications with dark theme and glowing effects
Author: Sokol
Latest version: 1.0.0




# 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:

```bash
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:

```bash
pnpm run dev
```

Open [http://localhost:5173](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.