UI Component Library (shadcn/ui)
Relevant source files
The following files were used as context for generating this wiki page:
- frontend/components.json
- frontend/src/components/ui/sheet.jsx
- frontend/src/components/ui/navigation-menu.jsx
- frontend/src/components/ui/context-menu.jsx
- frontend/src/components/ui/tabs.jsx
- frontend/src/components/ui/command.jsx
- frontend/src/components/ui/menubar.jsx
- frontend/src/components/ui/select.jsx
- frontend/tailwind.config.js
The UI Component Library in NEXUS is built upon the shadcn/ui architecture, utilizing Radix UI primitives and Tailwind CSS for styling. This system provides a set of reusable, accessible, and highly customizable components that maintain a consistent design language throughout the digital account and trial tracking system.
The library is configured to use the "New York" style and is integrated into the project's build process via CRACO. It leverages CSS variables for theming and class-variance-authority (CVA) for managing component variants, allowing the application to achieve its specific cyberpunk-meets-luxury aesthetic while maintaining structural accessibility.
Sources: frontend/components.json:1-21, frontend/package.json:71-75, test_result.md:144-150
Configuration and Architecture
The library is governed by a central configuration file that defines paths for components, utilities, and hooks. The project uses a non-TypeScript (JSX) environment and relies on Tailwind CSS for all layout and design tokens.
Core Configuration Tokens
| Option | Value | Description |
|---|---|---|
style | new-york | The visual style guide used for component generation. |
tailwind.config | tailwind.config.js | Reference to the Tailwind configuration file. |
tailwind.baseColor | neutral | The base color palette for the theme. |
aliases.ui | @/components/ui | The directory where UI components are stored. |
iconLibrary | lucide | The library used for iconography (Lucide React). |
Sources: frontend/components.json:1-21
Component Relationship Flow
The following diagram illustrates how components are structured, transitioning from low-level Radix primitives to styled NEXUS UI components.
This diagram shows the dependency chain where Radix provides the logic/accessibility, and Tailwind/CVA provides the NEXUS styling.
Sources: frontend/src/components/ui/sheet.jsx:1-10, frontend/src/components/ui/navigation-menu.jsx:1-10
Key UI Modules
Navigation and Menus
The library includes complex navigation structures such as Menubars, Context Menus, and Navigation Menus. These components utilize Radix portals to ensure they render above other content in the DOM tree.
- Menubar: A persistent horizontal menu system used for application-level commands. It supports sub-menus, checkboxes, and radio items.
- Navigation Menu: A specialized menu for site-wide navigation, featuring animated viewports and indicators.
- Context Menu: A right-click accessible menu system for localized actions.
Sources: frontend/src/components/ui/menubar.jsx:11-30, frontend/src/components/ui/navigation-menu.jsx:11-25, frontend/src/components/ui/context-menu.jsx:7-20
Overlays and Dialogs
NEXUS uses sophisticated overlay components for user interactions, including Command palettes and Sheets.
- Command: Built with
cmdk, this provides a searchable command palette. It is often wrapped in aDialogto appear as a modal interface. - Sheet: A slide-out panel that can emerge from the top, bottom, left, or right (defaulting to right in NEXUS). It uses
sheetVariantsto handle positional animations.
The Sheet component lifecycle manages animations and portal rendering for side-aligned panels.
Sources: frontend/src/components/ui/sheet.jsx:32-60, frontend/src/components/ui/command.jsx:11-35
Selection and Data Input
Input components are styled to support the cyberpunk aesthetic while maintaining standard HTML form functionality.
- Select: A customizable dropdown system that includes scroll buttons for long lists.
- Tabs: A layout component for switching between different views within the same context, used extensively in the dashboard and management interfaces.
Sources: frontend/src/components/ui/select.jsx:13-30, frontend/src/components/ui/tabs.jsx:6-15
Styling and Theming
The library relies on a CSS variable system defined in index.css and extended in tailwind.config.js. This allows for a unified dark/light mode transition and precise control over the cyberpunk color palette.
Tailwind Theme Extensions
| Category | Key Variables | Usage |
|---|---|---|
| Borders | var(--radius) | Standardized corner rounding across all UI elements. |
| Colors | background, foreground, primary, accent | Mapping of HSL values to utility classes. |
| Animations | accordion-down, accordion-up | Smooth height transitions for collapsible content. |
Sources: frontend/tailwind.config.js:10-70, frontend/src/index.css:20-60
Implementation Example: Sheet Variants
The library uses cva to define side-specific styles for the Sheet component, ensuring consistent animation directions.
const sheetVariants = cva(
"fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
{
variants: {
side: {
top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
left: "inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
right: "inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
},
},
defaultVariants: {
side: "right",
},
}
)
Sources: frontend/src/components/ui/sheet.jsx:32-51
Conclusion
The shadcn/ui component library provides the structural and visual foundation for the NEXUS frontend. By abstracting Radix UI primitives and applying a centralized Tailwind-based styling system, the project ensures that high-level modules like the Account Vault and Trial Tracker remain accessible and responsive while adhering to the project's unique cyberpunk design requirements.
Summary derived from: frontend/components.json, frontend/src/App.js, test_result.md