UI Component Library
Relevant source files
The following files were used as context for generating this wiki page:The Hold-em or Fold-em Poker project utilizes a robust and flexible UI component library built upon a modern frontend stack. This library provides a collection of reusable, composable, and stylable React components that form the building blocks for the application's user interface. The architecture is heavily inspired by shadcn/ui, emphasizing composition over inheritance and leveraging utility-first CSS for styling.
The core of the library is a combination of Radix UI for accessible, unstyled component primitives and Tailwind CSS for styling. This approach ensures that components are both highly functional and easily customizable to fit the application's specific design language. Key utilities like class-variance-authority and tailwind-merge are employed to create variant-driven components with dynamic and conflict-free class names.
Core Technologies & Dependencies
The UI component library is built on several key open-source packages. The relationship between these technologies allows for the creation of accessible, variant-based, and consistently styled components.
Sources: package.json
The following diagram illustrates the foundational technology stack for a typical UI component in this library.
This diagram shows that an application component is a React component built on Radix UI primitives, with its styles and variants managed by a combination of Tailwind CSS, CVA, and class name utilities.
The primary dependencies are summarized in the table below:
| Dependency | Version | Description |
|---|---|---|
react | 19.1.0 | The core UI library for building components. |
@radix-ui/react-* | latest | A collection of unstyled, accessible UI primitives (e.g., Dialog, Tabs, Slot). |
tailwindcss | 4.1.9 | A utility-first CSS framework for styling components. |
class-variance-authority | ^0.7.1 | A library for creating type-safe component variants with Tailwind CSS. |
clsx | ^2.1.1 | A tiny utility for constructing className strings conditionally. |
tailwind-merge | ^2.5.5 | A utility to merge Tailwind CSS classes without style conflicts. |
lucide-react | ^0.454.0 | Provides a library of simply designed icons. |
Sources: package.json:10-48
Styling and Theming
The application employs a theming system based on CSS custom properties (variables) defined in app/globals.css. This allows for consistent styling across the application and supports both light and dark modes by redefining these variables within a .dark class scope.
Key aspects of the styling system include:
- Color Palette: A comprehensive set of color variables for backgrounds, foregrounds, cards, borders, and interactive states (primary, secondary, destructive).
- Chart Colors: A dedicated set of variables (
--chart-1to--chart-5) used for data visualization elements, such as in theStatsDashboard. - Layout Variables: Variables like
--radiuscontrol the border-radius of elements, ensuring a consistent look and feel.
Sources: app/globals.css:4-90
Theme Variables
The following table lists some of the core CSS variables used for theming.
| Variable | Light Mode Value | Dark Mode Value | Description |
|---|---|---|---|
--background | oklch(1 0 0) | oklch(0.145 0 0) | Main background color of the page. |
--foreground | oklch(0.145 0 0) | oklch(0.985 0 0) | Main text color. |
--card | oklch(1 0 0) | oklch(0.145 0 0) | Background color for card components. |
--primary | rgb(88, 88, 109) | oklch(0.985 0 0) | Primary interactive color. |
--primary-foreground | rgb(255, 185, 0) | oklch(0.205 0 0) | Text color for primary elements. |
--destructive | oklch(0.577 0.245 27.325) | oklch(0.396 0.141 25.723) | Color for destructive actions (e.g., errors). |
--border | oklch(0.922 0 0) | oklch(0.269 0 0) | Color for borders and separators. |
--chart-2 | rgb(5, 240, 147) | oklch(0.696 0.17 162.48) | A distinct color for charts and stats. |
--chart-4 | oklch(0.828 0.189 84.429) | oklch(0.627 0.265 303.9) | Another distinct color for charts and stats. |
--radius | 0.625rem | 0.625rem | The base border radius for components. |
Sources: app/globals.css:4-90
Component Architecture
Components in components/ui follow a consistent architectural pattern that promotes reusability and type safety.
Variant-Driven Components with CVA
The class-variance-authority (CVA) library is central to creating components with multiple visual variants. The Button component is a prime example.
The buttonVariants function defines different styles (variant) and sizes (size) that can be applied to the button via props. The cn utility, which combines clsx and tailwind-merge, is then used to apply these variant classes along with any additional classes passed via the className prop.
This diagram shows the flow of creating a styled button variant.
Sources: components/ui/button.tsx:8-42
Component Composition
Many components are designed to be composed together to build more complex UI structures. This pattern is evident in components like Card, Dialog, and Sheet, which are built from smaller, dedicated parts. For example, a Card is assembled using CardHeader, CardContent, and CardFooter.
This compositional approach is powered by React.forwardRef to pass down refs and @radix-ui/react-slot to merge props and children of wrapper components.
The following diagram illustrates the composition of the Dialog and Sheet components, which both rely on the same underlying primitive from Radix UI.
This shows that both AppDialog and AppSheet are application-specific implementations that build upon the same foundational RadixDialog primitive, demonstrating code reuse and a consistent API.
Sources: components/ui/dialog.tsx, components/ui/sheet.tsx
Component Showcase
Button
The Button component offers several visual styles and sizes, configurable via props.
| Prop | Type | Options | Default |
|---|---|---|---|
variant | string | default, destructive, outline, secondary, ghost, link | default |
size | string | default, sm, lg, icon | default |
Sources: components/ui/button.tsx:8-42
Card
A versatile container for content, composed of several sub-components:
Card: The main container.CardHeader: Section for the title and description.CardTitle: The title text.CardDescription: The description text.CardContent: The main content area.CardFooter: A dedicated footer section.
This structure is used extensively, for example, to display different rule sections in the RulesPage.
Sources: components/ui/card.tsx, components/rules-page.tsx:441-458
Sheet
The Sheet component is a side panel that slides into view. It is built on the Radix Dialog primitive and provides variants to control which side of the screen it appears from.
| Prop | Type | Options | Default |
|---|---|---|---|
side | string | top, bottom, left, right | right |
The Sheet is used for features like the ChatPanel.
Sources: components/ui/sheet.tsx:32-51, components/chat-panel.tsx:49-57
Tabs
The Tabs component is used to create tabbed interfaces for organizing content. It is composed of:
Tabs: The root container.TabsList: The container for the tab triggers.TabsTrigger: An individual tab button.TabsContent: The content panel associated with a trigger.
This component is used to switch between Friends, Requests, and Add Friends views in the FriendsPage.
Sources: components/ui/tabs.tsx, components/friends-page.tsx:169-210