UI Components (shadcn/ui)
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
The personal finance application utilizes shadcn/ui as its primary component library for building a consistent, accessible, and high-performance user interface. The implementation follows a specific design system characterized by the "Lyra" style and a "Stone" color palette, aiming for a professional financial dashboard aesthetic.
These components are integrated into a Next.js App Router architecture, leveraging React Server Components (RSC) and Tailwind CSS for styling. The library provides the foundational building blocks for complex features such as transaction mapping, financial analytics charts, and account management.
Sources: CLAUDE.md:73-85, frontend/components.json:3-10
Architecture and Configuration
The shadcn/ui integration is governed by a central configuration file and a set of architectural guidelines that ensure visual consistency across the frontend.
Design System Configuration
The project uses the following specific shadcn/ui settings:
- Style:
base-lyra - Base Color:
stone - Radius:
None (0)(Hard edges for a technical/monospaced look) - Icon Library:
remixicon(integrated via@remixicon/react) - Font:
JetBrains Mono
Sources: frontend/components.json:3-15, CLAUDE.md:120-125
Component Structure
Components are organized within the frontend/components/ directory:
ui/: Low-level shadcn primitives (Button, Sheet, Card, etc.)layout/: Structural components like Sidebar and Headercharts/: Data visualizations built on top of Recharts, styled to match the UI
Sources: CLAUDE.md:104-108, frontend/components.json:16-22
Key UI Primitives
The application extends standard shadcn/ui components with project-specific variants and Tailwind utility classes.
Button Component
The Button component is built using class-variance-authority (CVA) to manage multiple visual states and sizes.
| Variant | Description |
|---|---|
default | Primary action button with stone background |
destructive | Red background for dangerous actions (e.g., deleting categories) |
outline | Bordered button for secondary actions |
ghost | No background/border until hover |
link | Underlined text style |
Sources: frontend/components/ui/button.tsx:7-25
Sheet and Dialogs
The application uses a Sheet component based on @base-ui/react/dialog for side-panel navigation and overlays. These components include custom animations for "open" and "closed" states defined via data attributes.
The diagram shows the component hierarchy for the Sheet primitive used in sidebars and mobile menus.
Dependency Integration
The UI system relies on a specific set of libraries to handle styling, icons, and animations.
| Library | Purpose |
|---|---|
tailwindcss | Core styling engine |
@remixicon/react | Iconography (RiHomeLine, RiExchangeLine, etc.) |
clsx & tailwind-merge | Utility for conditional class merging |
class-variance-authority | Managing component variants (CVA) |
recharts | Visualizing financial data (Sankey, Bar charts) |
Sources: frontend/package.json:28-50, CLAUDE.md:75-84
Implementation Patterns
Global Context and Providers
The root layout wraps the application in a Providers component and a TooltipProvider to ensure UI components have access to necessary contexts (themes, state, and accessibility tooltips).
// frontend/app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en" suppressHydrationWarning>
<body className="font-sans antialiased">
<Providers>
<TooltipProvider>{children}</TooltipProvider>
</Providers>
</body>
</html>
);
}
Sources: frontend/app/layout.tsx:12-23
Component Path Aliasing
To maintain clean imports, the project uses TypeScript aliases defined in components.json.
@/components/ui: Points to shadcn primitives@/lib/utils: Points to utility functions (likecnfor Tailwind merging)@/hooks: Points to custom React hooks
Sources: frontend/components.json:16-22
Summary
The UI component system in this project is a strictly configured implementation of shadcn/ui. By enforcing a zero-radius "Lyra" style with a Stone color theme and JetBrains Mono typography, the application achieves a distinct financial tool aesthetic. The components are modularized to separate base primitives from complex business logic, ensuring maintainability across the Next.js frontend.