shadcn and Base UI Primitives
Relevant source files
The following files were used as context for generating this wiki page:
This document outlines the implementation and configuration of UI primitives in the Portfolio OS project. The architecture leverages shadcn/ui for high-level accessible components and Base UI (formerly Radix UI primitives) for underlying component logic and state management.
The project uses a customized "base-nova" style for shadcn components, integrated with Tailwind CSS v4 and CSS variables to support both light and dark modes. These primitives form the foundational building blocks for complex features like the Window System and application forms.
Component Architecture
The UI layer is built on a tiered architecture where low-level logic is handled by @base-ui/react and styling is managed via Tailwind CSS and class-variance-authority.
Primitive Stack
The following diagram illustrates how UI components are composed:
The relationship between logic providers, styling utilities, and final UI implementations.
Sources: package.json:20-35, components.json:2-10
Key Dependencies
| Dependency | Version | Purpose |
|---|---|---|
@base-ui/react | ^1.6.0 | Headless UI primitives for accessibility and logic. |
class-variance-authority | ^0.7.1 | Managing component variants and states. |
tailwind-merge | ^3.6.0 | Merging Tailwind classes without conflicts. |
lucide-react | ^1.23.0 | Standard icon library for all UI primitives. |
Sources: package.json:20-30, components.json:11
Configuration and Styling
The system is configured via components.json and app/globals.css to ensure a consistent visual language across the portfolio's macOS-inspired interface.
shadcn Configuration
The project uses the following CLI configuration for component generation:
- Style:
base-nova - Tailwind Config: Integrated via
app/globals.css - Base Color:
neutral - RTL Support: Enabled for Persian (fa) locale compatibility.
Sources: components.json:2-15, app/layout.tsx:28-30
CSS Variable System
Components consume Oklch-based color variables defined in the global CSS. This supports dynamic switching between light and dark themes.
:root {
--background: oklch(1 0 0);
--foreground: oklch(0.145 0 0);
--primary: oklch(0.205 0 0);
--radius: 0.625rem;
}
.dark {
--background: oklch(0.145 0 0);
--foreground: oklch(0.985 0 0);
}
Sources: app/globals.css:48-75, app/globals.css:80-105
Core Primitives Implementation
Button Primitive
The Button component utilizes class-variance-authority to define multiple visual states and sizes, ensuring consistency across different application contexts.
- Variants: Default, Destructive, Outline, Secondary, Ghost, Link.
- Sizes: Default, Small, Large, Icon.
- Implementation: Uses a standard HTML button element enhanced with utility classes.
Sources: components/ui/button.tsx, package.json:21
Input and Form Primitives
Form elements like Input, Label, and Textarea are implemented as thin wrappers around standard HTML elements, styled to match the "Liquid Glass" aesthetic defined in the global layers.
Interaction flow between form features and UI primitives.
Sources: features/contact/components/ContactApp.tsx:15-32, app/globals.css:112-115
Integration in Features
UI primitives are primarily consumed by feature-level components to build complex interfaces such as the Contact form.
| Feature | Primitives Used | File Reference |
|---|---|---|
| Contact Form | Button, Input, Label, Textarea | features/contact/components/ContactApp.tsx |
| Navigation | lucide-react icons, Tailwind utility classes | features/desktop/components/MenuBar.tsx |
| Project Cards | Tailwind border and radius utilities | features/projects/components/ProjectsApp.tsx |
Sources: features/contact/components/ContactApp.tsx:4-8, features/projects/components/ProjectsApp.tsx:13-18
Conclusion
The use of shadcn and Base UI primitives provides the Portfolio OS with a robust, accessible foundation. By centralizing styles in app/globals.css and logic in @base-ui/react, the project maintains a highly customizable "macOS Tahoe" aesthetic while ensuring technical scalability through standardized component definitions.