UI Component Library (shadcn/ui)
Relevant source files
The following files were used as context for generating this wiki page:
The UI component library in the Recoup Admin project consists of a set of reusable, accessible, and themeable components built on top of Radix UI primitives and styled using Tailwind CSS. These components provide a consistent visual language across the dashboard, handling complex interactions like data visualization, tabular displays, and hierarchical navigation.
The library utilizes a "copy-and-paste" architecture where components are co-located within the components/ui/ directory, allowing for granular customization and direct control over the implementation details. Styling is managed through a combination of Tailwind CSS utility classes and CSS variables defined in the global stylesheet.
Sources: app/globals.css:1-55, package.json:15-25, README.md:28-40
Core Architecture and Styling
The UI system is built on a foundation of CSS variables that support both light and dark mode themes. Components use the cn utility (provided by lib/utils) to merge Tailwind classes dynamically, ensuring that custom classes can override default component styles safely.
Theming System
The project uses a CSS-in-JS approach for theme-specific variables, particularly within the charting system, and standard CSS variables for general UI elements.
| Variable | Light Value | Dark Value |
|---|---|---|
--background | #ffffff | #0a0a0a |
--foreground | #0a0a0a | #fafafa |
--muted | #f5f5f5 | #262626 |
--border | #e5e5e5 | #262626 |
Sources: app/globals.css:3-33, components/ui/chart.tsx:9-11
Key Components
Data Visualization (Charts)
The charting system is an abstraction over Recharts, providing a ChartContainer that manages responsive sizing, accessibility layers, and dynamic color injection via CSS variables.
The diagram shows how the ChartContainer acts as the primary provider for configuration and styles, which are then consumed by tooltips and legends.
The ChartStyle component dynamically generates a <style> block to map user-defined colors in the ChartConfig to CSS variables (e.g., --color-desktop).
Sources: components/ui/chart.tsx:37-97, components/Admin/AdminLineChart.tsx:39-45
Tables and Data Grids
The table components provide a set of atomic elements (TableHeader, TableBody, TableCell, etc.) that follow standard HTML table semantics while adding Tailwind styling for borders, hover states, and spacing.
| Component | Purpose | HTML Element |
|---|---|---|
Table | Main container with overflow-auto | <table> |
TableRow | Row with hover transitions | <tr> |
TableHead | Muted foreground, medium weight header | <th> |
TableCell | Padded data cell | <td> |
Sources: components/ui/table.tsx:7-104
Navigation (Breadcrumbs)
The breadcrumb system uses Radix UI's Slot primitive to allow flexible rendering (e.g., using Next.js Link components as breadcrumb links).
The diagram illustrates the hierarchical structure of navigation links and separators.
Sources: components/ui/breadcrumb.tsx:7-89
Surface Containers (Cards)
Cards are used to group related content and actions. The implementation utilizes a "sub-component" pattern where a parent Card contains optional CardHeader, CardContent, and CardFooter elements.
// components/ui/card.tsx:7-18
function Card({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="card"
className={cn(
"flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm",
className
)}
...props
/>
)
}
Sources: components/ui/card.tsx:7-87
Implementation Patterns
- Direct Slot Usage: Components like
CardandChartusedata-slotattributes to allow specific targeting in global CSS or complex Tailwind selectors (e.g.,[&_.recharts-cartesian-axis-tick_text]). - Radix UI Integration: Primitives like
@radix-ui/react-slotare used in breadcrumbs to support theasChildpattern, allowing components to merge their props onto their immediate child. - Client-Side Rendering: Interactive components such as charts and tables with sorting functionality are marked with
"use client"to handle React state and lifecycle methods.
Sources: components/ui/chart.tsx:1, components/ui/breadcrumb.tsx:3, components/ui/table.tsx:1
Summary
The UI Component Library serves as the visual and interactive backbone of the Recoup Admin dashboard. By combining Radix UI primitives for accessibility and Tailwind CSS for styling, it provides a performant and customizable design system. The library is specifically optimized for data-heavy views, offering robust table and charting components that integrate seamlessly with the project's light and dark mode themes.