UI Component Library
Relevant source files
The following files were used as context for generating this wiki page:The GUC Resume Enhancer's UI is built upon a flexible and reusable component library. This library is based on the principles of composition over configuration, leveraging modern frontend technologies to ensure a consistent and maintainable user interface. The system uses a collection of unstyled, accessible primitives from Radix UI, which are then styled with Tailwind CSS. This approach, characteristic of a shadcn/ui implementation, allows for robust, customizable, and themeable components.
The core of the library resides in the components/ui/ directory, where each file represents a distinct UI component. These components are used across the application, from the main landing page to complex interfaces like the resume enhancement view, ensuring a cohesive look and feel. The global styling and layout structure are defined in layout.tsx and configured via tailwind.config.ts.
Core Technologies & Architecture
The UI component library is built on a modern stack of frontend technologies. The architecture promotes reusability and separation of concerns, with styling, logic, and structure managed through a combination of libraries.
Sources: package.json, components/ui/sheet.tsx
Key Dependencies
The following table outlines the primary dependencies that form the foundation of the UI library.
| Dependency | Version | Role |
|---|---|---|
react | 18.2.0 | The core library for building the user interface. |
next | 14.2.28 | The React framework providing the App Router and server-side rendering capabilities. |
tailwindcss | 3.3.3 | A utility-first CSS framework for styling the components. |
@radix-ui/react-* | ~1.1.0 | A collection of unstyled, accessible UI primitives (e.g., Dialog, Select, Tabs). |
class-variance-authority | 0.7.0 | A library for creating variants of components with different styles (e.g., button sizes, colors). |
clsx / tailwind-merge | 2.1.1 / 2.5.2 | Utilities for conditionally joining and merging Tailwind CSS class names without conflicts. |
lucide-react | 0.446.0 | Provides a library of simply designed icons used throughout the UI. |
Sources: package.json:33-87
Component Architecture
The diagram below illustrates the architectural layers of the UI component system. Application pages consume custom UI components, which are themselves wrappers around accessible Radix UI primitives styled with Tailwind CSS.
This diagram shows the dependency flow from the core React library up to the application pages.
Sources: page.tsx, enhance/[id]/_components/enhance-interface.tsx, dashboard/_components/upload-section.tsx, components/ui/sheet.tsx, components/ui/tabs.tsx
A typical component in components/ui/ is a client-side React component ('use client') that wraps a corresponding primitive from a Radix UI package. For example, components/ui/sheet.tsx wraps @radix-ui/react-dialog to create a slide-out panel. It uses the cn utility (a combination of clsx and tailwind-merge) to apply base styles and merge any additional classes passed via props. The class-variance-authority (cva) function is used to define different visual variants, such as the side from which the sheet appears.
Sources: components/ui/sheet.tsx:1-125
Example: Sheet Component Structure
The Sheet component is a composite component built from several parts exported by @radix-ui/react-dialog. This composition allows for flexible usage while maintaining accessibility and state management internally.
This diagram shows how the custom Sheet component and its sub-components are derived from Radix UI primitives.
Sources: components/ui/sheet.tsx:7-125
Component Inventory
The project includes a wide range of pre-built components located in the components/ui/ directory. These are used to construct the application's views.
| Component | Usage Example | Description | Source File |
|---|---|---|---|
Button | Used for all interactive actions like "Get Started" and "Upload". | A customizable button component with variants for style, size, etc. | page.tsx:103-105 |
Card | Used to group related content, like features or resume sections. | A container component with header, content, and footer sections. | page.tsx:129-142 |
Select | Used in the enhancement interface to choose an enhancement type. | A dropdown select component for choosing from a list of options. | enhance/[id]/_components/enhance-interface.tsx:422-434 |
Progress | Displays the progress of file uploads and AI enhancements. | A progress bar to provide visual feedback on long-running operations. | dashboard/_components/upload-section.tsx:141-144 |
Alert | Shows warnings, errors, or informational messages. | A component to display a short, important message in a way that attracts the user's attention. | dashboard/_components/upload-section.tsx:61-64 |
Tabs | Not directly used in provided files but available in ui. | A set of layered sections of content, known as tab panels, that are displayed one at a time. | components/ui/tabs.tsx |
Sheet | Not directly used in provided files but available in ui. | A slide-out panel that appears from the side of the screen, often used for forms or navigation. | components/ui/sheet.tsx |
Input | Used for the file upload input. | A standard form input field. | dashboard/_components/upload-section.tsx:88-95 |
DropdownMenu | Used in the header for the user profile menu. | A menu that appears when a user interacts with a trigger, displaying a list of actions or links. | header.tsx:39-65 |
Global Styles and Layout
The application's global styles and root layout are managed in layout.tsx. This file imports the global stylesheet (globals.css) and sets up the basic HTML document structure, including the font (Inter) and metadata. It also wraps the main content in a Providers component and includes a shared Header.
Sources: layout.tsx:1-38
The Header component is a key part of the UI, providing consistent navigation across the site. It uses Button, DropdownMenu, and Image components to create the main navigation bar, which adapts based on the user's authentication status.
Sources: header.tsx:1-92