Shared UI Library (shadcn/ui)
Relevant source files
The following files were used as context for generating this wiki page:
The Shared UI Library, identified by the workspace package @subito/ui, serves as the centralized design system and component repository for the Subito monorepo. It leverages shadcn/ui patterns to provide reusable, accessible, and stylable React components that are consumed by various applications within the workspace, such as the dashboard.
The library is built on a foundation of React 19, Tailwind CSS 4, and Radix-based primitives (via @base-ui/react), ensuring a consistent user experience and visual identity across the entire project ecosystem.
Sources: packages/ui/package.json:1-42, README.md:1-20
Architecture and Integration
The UI library is structured as a standalone workspace package that exports components, styles, and utility functions. Applications within the monorepo consume these resources through workspace aliases and direct imports.
Component Distribution Flow
The following diagram illustrates how components are managed in the packages/ui directory and imported by consumer applications like apps/dashboard.
The design system relies on a central globals.css file which defines the design tokens using CSS variables and OKLCH color spaces.
Sources: packages/ui/package.json:35-41, apps/dashboard/components.json:1-20, packages/ui/src/styles/globals.css:1-50
Workspace Configuration
The library is configured via components.json, which defines the directory structure and aliases for the shadcn CLI.
| Configuration Key | Value | Description |
|---|---|---|
style | base-vega | The base visual style for components. |
tailwind.css | src/styles/globals.css | Path to the global stylesheet. |
aliases.ui | @subito/ui/components | Import alias for UI components. |
aliases.utils | @subito/ui/lib/utils | Import alias for utility functions like cn. |
rsc | true | Indicates support for React Server Components. |
Sources: packages/ui/components.json:1-21, apps/dashboard/components.json:1-18
Component Implementation
Components are built using a "primitive + variant" approach. They utilize @base-ui/react (a successor to Radix UI) for accessible primitives and class-variance-authority (CVA) for managing style variations.
Example: Tabs Component
The Tabs component demonstrates the modular structure, consisting of a Root, List, Trigger, and Content.
The library uses data-active and group-data attributes for state-based styling, allowing complex interactions like changing the shadow or indicator position when a tab is selected.
Sources: packages/ui/src/components/tabs.tsx:1-92
Variant Management
Style variants are defined using cva. For instance, the TabsList supports a default and a line variant.
const tabsListVariants = cva(
"group/tabs-list inline-flex ...",
{
variants: {
variant: {
default: "bg-muted",
line: "gap-1 bg-transparent",
},
},
defaultVariants: {
variant: "default",
},
}
)
Sources: packages/ui/src/components/tabs.tsx:30-45
Design Tokens and Theming
The library utilizes Tailwind CSS 4 features and OKLCH color definitions for precise color control and native dark mode support.
Theme Variables
The globals.css file defines a comprehensive set of variables for both light and dark modes.
| Variable | Purpose | Light Value (Example) | Dark Value (Example) |
|---|---|---|---|
--background | Main background color | oklch(1 0 0) | oklch(0.145 0 0) |
--foreground | Default text color | oklch(0.145 0 0) | oklch(0.985 0 0) |
--primary | Primary action color | oklch(0.205 0 0) | oklch(0.922 0 0) |
--radius | Border radius base | 0.625rem | 0.625rem |
--destructive | Error/Delete states | oklch(0.577 0.245 27.325) | oklch(0.704 0.191 22.216) |
Sources: packages/ui/src/styles/globals.css:52-125
Styling Layering
The stylesheet is organized into layers using Tailwind directives:
- Imports: Includes
tailwindcss,tw-animate-css, andshadcn/tailwind.css. - Theme: Custom mapping of variables to Tailwind utility names (e.g.,
--color-primary: var(--primary)). - Base: Global styles applied to all elements (e.g., setting default border colors and body background).
Sources: packages/ui/src/styles/globals.css:1-135
Usage in Applications
To use components in an application within the monorepo, developers import them from the @subito/ui workspace package.
Importing Components
Components are exported as named exports from their respective files within the UI package.
import { Button } from "@subito/ui/components/button";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@subito/ui/components/tabs";
Adding New Components
The shadcn CLI is used to add new components. Because the project uses a monorepo structure, the command must specify the target application to ensure the component is placed in the shared packages/ui directory as configured in the project's aliases.
pnpm dlx shadcn@latest add [component-name] -c apps/dashboard
Sources: README.md:5-20, apps/dashboard/components.json:12-17
Summary
The Shared UI Library provides a robust, standardized set of components for the Subito project. By combining @base-ui/react primitives with Tailwind CSS 4 and OKLCH colors, it ensures a high degree of accessibility and visual fidelity. Its integration as a workspace package allows for seamless sharing of UI logic across different applications while maintaining a single source of truth for the design system.