UI Component Library Extensibility
Relevant source files
The following files were used as context for generating this wiki page:
The UI component library provides a centralized collection of shared components and theme tokens for applications within the Thoth monorepo. It manages visual consistency by exportable styles and structured component definitions, primarily utilized by the web application.
Applications consume these shared assets through workspace-linked dependencies. This architecture allows developers to maintain a single source of truth for the design system while scaling multiple front-end services.
Sources: packages/ui/README.md, apps/web/package.json:18
Library Architecture
The @thoth/ui package acts as a shared utility layer. It integrates Tailwind CSS for styling and Radix UI for accessible component primitives. The library uses shadcn/ui as the underlying framework for component generation and management.
The diagram shows how the UI package exports styles and components to the web application.
Sources: packages/ui/package.json:19-24, packages/ui/components.json, apps/web/src/app/layout.tsx:7
Core Dependencies
The extensibility of the library relies on several foundational packages that handle styling, variants, and animations.
| Dependency | Purpose |
|---|---|
tailwindcss | Provides utility-first styling and theme configuration. |
class-variance-authority | Manages component variants and CSS class composition. |
radix-ui | Offers unstyled, accessible UI primitives. |
shadcn | Facilitates component generation and CLI-based updates. |
lucide-react | Standard icon library used across components. |
Sources: packages/ui/package.json:18-24, packages/ui/components.json:14, apps/web/package.json:19
Component Management
Components in the library are typically generated rather than edited manually. The project utilizes specific AI-assisted skills (such as adding-ui-components) to add or update UI elements within the src/components directory.
Configuration
The components.json file defines the structural rules for the library, including path aliases and styling preferences.
{
"style": "radix-nova",
"tailwind": {
"css": "src/styles/globals.css",
"baseColor": "neutral",
"cssVariables": true
},
"aliases": {
"components": "@thoth/ui/components",
"utils": "@thoth/ui/lib/utils",
"ui": "@thoth/ui/components"
}
}
Sources: packages/ui/components.json:3-13, packages/ui/README.md:10-12
Consuming Shared Components
To extend an application with the UI library, you must configure the application to recognize and transpile the shared package.
- Style Integration: Import the global CSS file into the application's root style or layout file.
- Component Import: Reference components via their specific export paths, such as
@thoth/ui/components/button. - Next.js Configuration: Add
"@thoth/ui"to thetranspilePackagesarray in the application's configuration to ensure TypeScript and CSS are processed correctly.
The sequence shows the standard integration flow for a consumer application.
Sources: packages/ui/README.md:3-7, packages/ui/package.json:7-12
Development Standards
The project enforces specific coding styles to maintain the UI library's maintainability.
- No Semicolons: Prose and documentation should avoid semicolons to improve readability.
- Conciseness: Code and descriptions must be human-readable and direct.
- Linting: Rules are enforced using Biome or GritQL plugins rather than manual documentation where possible.
- Default Exports: Next.js specific files (like
page.tsxorlayout.tsx) require default exports, which are explicitly permitted via lint overrides.
Sources: CLAUDE.md:1-12, apps/web/src/app/page.tsx:8, apps/web/src/app/layout.tsx:18
Summary
The UI Component Library Extensibility is built on a modular architecture using shadcn/ui and Tailwind CSS. By centralizing components in the @thoth/ui package and utilizing automated generation skills, the system ensures that multiple applications can share a consistent design language with minimal manual overhead. Configuration via components.json and workspace exports allows for seamless integration into the Next.js web application.