UI Component Library
Relevant source files
The following files were used as context for generating this wiki page:
The UI Component Library in the AI Reviewer project is a structured system for managing visual design primitives and reusable interface elements. It follows the shadcn/ui convention, utilizing Tailwind CSS for styling and Radix UI primitives for accessible component logic. The library is split between a shared package (@repo/ui) for cross-app primitives and app-specific components within the Next.js web application.
The primary goal of this library is to provide a consistent look and feel across the platform, facilitating rapid development of features like the repository onboarding dashboard and the AI review feedback loop.
Sources: packages/ui/README.md, apps/web/components.json:1-21
Architecture and Structure
The UI architecture is designed for scalability and code sharing within a monorepo. It distinguishes between global design tokens and local component implementations.
Distribution Strategy
packages/ui: Contains cross-app design primitives, brand components (logos), and utility helpers like thecn()class-merging function.apps/web/src/components/ui/: Houses shadcn primitives that are currently exclusive to the web application. These are promoted to the shared package only when a second application requires them.
Sources: packages/ui/README.md:1-15
Core Technologies
The library is built upon a modern stack focused on utility-first styling and type safety:
| Technology | Purpose |
|---|---|
| Tailwind CSS (v4) | Atomic styling and theme variables. |
| Lucide React | Standard icon library for visual indicators. |
| Geist Font | Sans and Mono typefaces for zero layout shift. |
| Zod | Schema validation for form-related UI inputs. |
Sources: apps/web/app/layout.tsx:1-25, packages/ui/package.json:20-27, apps/web/components.json:15-19
Shared Utilities and Design Tokens
The library exports several core utilities that ensure consistent styling and behavioral patterns.
The cn Utility
The cn helper is a critical utility found in @repo/ui/lib/cn.ts. It combines clsx and tailwind-merge to allow for conditional class application while safely resolving Tailwind class conflicts.
Sources: packages/ui/README.md:7-7, packages/ui/package.json:20-26
Typography and Layout
The root layout establishes the visual foundation using the Geist font family.
The diagram shows how the root layout injects font variables and global styles into the application tree.
Sources: apps/web/app/layout.tsx:12-25
Component Implementations
The project implements several shadcn/ui canonical primitives, most notably the Card component system used extensively in the onboarding and home pages.
Card System
The Card is a composable set of components exported from apps/web/src/components/ui/card.tsx. It provides a structured container for content, descriptions, and actions.
| Sub-component | Function |
|---|---|
Card | Main container with border and shadow. |
CardHeader | Flex container for titles and descriptions. |
CardTitle | Large, semi-bold text for the card's heading. |
CardDescription | Small, muted text for context. |
CardContent | The main body area of the card. |
Sources: apps/web/src/components/ui/card.tsx:1-51
Visual Hierarchy in Onboarding
The OnboardingPage demonstrates the use of these components to create a repository selection interface.
This diagram illustrates the hierarchical nesting of UI components within the onboarding view.
Sources: apps/web/app/onboarding/page.tsx:87-160
Configuration and Tooling
The library's behavior is governed by a components.json configuration file, which defines paths and styling preferences for the shadcn CLI.
{
"style": "default",
"tailwind": {
"css": "app/globals.css",
"baseColor": "neutral"
},
"aliases": {
"ui": "@/components/ui",
"utils": "@/lib/utils"
}
}
Sources: apps/web/components.json:1-21
The library currently supports a Light-only theme for the MVP, though it is architected for dark mode support by adding the dark class to the <html> element.
Sources: apps/web/app/layout.tsx:1-10