Shadcn UI Integrations
Relevant source files
The following files were used as context for generating this wiki page:
The Shadcn UI implementation within this repository is structured as a dedicated package (@siluat/shadcn-ui) designed to provide a centralized library of reusable components for various applications and playgrounds. This integration leverages Radix UI primitives, TailwindCSS for styling, and Lucide React for iconography, following monorepo best practices to ensure consistency across the apps/ and playgrounds/ directories.
Sources: CLAUDE.md:27-28, packages/shadcn-ui/package.json:2-17
Core Architecture and Workspace Integration
The project utilizes a monorepo structure managed by Turborepo and Bun workspaces. The @siluat/shadcn-ui package is positioned as a foundational UI layer that other workspace projects depend on using the workspace:* versioning pattern.
Workspace Dependencies
Applications like dotori-note and playgrounds like ui-craft-playground integrate the UI library by declaring it in their dependencies. This allows for a single source of truth for UI components while maintaining the flexibility of individual application logic.
| Consuming Project | File Path | Usage Type |
|---|---|---|
| dotori-note | apps/dotori-note/package.json | Production Application |
| ui-craft-playground | playgrounds/ui-craft-playground/package.json | Testing Playground |
| animation-practice | playgrounds/animation-practice/package.json | Specialized Playground |
Sources: CLAUDE.md:22-31, apps/dotori-note/package.json:20, playgrounds/ui-craft-playground/package.json:24
Dependency Flow
The following diagram illustrates how UI components and configurations flow from the core @siluat/shadcn-ui package to the various applications.
The diagram shows the distribution of components, utilities, and styles from the central package to consumer applications.
Sources: packages/shadcn-ui/package.json:34-40, apps/dotori-note/components.json:8-11
Component Implementation Pattern
Components are built using a "headless" approach where Radix UI provides the accessible primitives and TailwindCSS provides the visual layer.
Implementation Example: Sheet Component
The Sheet component (based on Radix Dialog) demonstrates the internal structure used across the library. It uses a series of sub-components to handle different parts of the overlay UI, such as triggers, content, and headers.
The hierarchy of the Sheet component showing the relationship between primitives and layout sub-components.
Sources: packages/shadcn-ui/src/components/sheet.tsx:8-120
Technical Features
- Client Directives: Components utilize
"use client"to ensure they are rendered on the client-side, supporting interactivity required by Radix UI. - Utility Integration: A shared
cn(class name) utility is used to merge Tailwind classes and handle conditional logic. - Animation: Integration with
tw-animate-cssand Tailwind's data-attribute selectors (e.g.,data-[state=open]) facilitates transition effects.
Sources: packages/shadcn-ui/src/components/sheet.tsx:1-12, packages/shadcn-ui/package.json:16
Configuration and Tooling
The integration is managed through components.json files located in both the library package and the consuming applications. These files define the path aliases and technical choices for the Shadcn CLI.
Library Configuration (packages/shadcn-ui/components.json)
The core library defines the base styles and aliases for internal components and utilities.
| Key | Value | Description |
|---|---|---|
style | new-york | Visual design system style |
tailwind.css | src/styles/globals.css | Primary CSS entry point |
aliases.ui | @siluat/shadcn-ui/components | Import path for components |
aliases.utils | @siluat/shadcn-ui/lib/utils | Path for utility functions |
Sources: packages/shadcn-ui/components.json:2-16
Consumer Configuration (apps/dotori-note/components.json)
Consuming apps point back to the workspace package for shared resources while maintaining local folders for app-specific UI logic.
{
"tailwind": {
"css": "../../packages/shadcn-ui/src/styles/globals.css"
},
"aliases": {
"utils": "@siluat/shadcn-ui/lib/utils",
"ui": "@siluat/shadcn-ui/components"
}
}
Sources: apps/dotori-note/components.json:7-17
Development Workflow
The development of UI components is supported by specific playground environments.
- Creation: Components are added to
packages/shadcn-ui/src/components. - Export: Components are exposed via the
exportsfield inpackage.json. - Visual Testing: The
playgrounds/ui-craft-playgroundis used to test components and fine-tune animations before they are used in production apps likedotori-note. - Static Checking: The repository enforces quality via
turbo run static-check, which includes TypeScript type checking and Biome linting across the UI package.
Sources: CLAUDE.md:12-16, packages/shadcn-ui/package.json:34-40, packages/ui-craft/README.md:12-14
Summary
The Shadcn UI integration provides a robust, scalable design system for the web-projects monorepo. By centralizing components in @siluat/shadcn-ui, the project ensures that high-quality, accessible UI elements are consistently available to Astro-based blogs (dotori-note) and Next.js-based playgrounds alike, utilizing modern tools like TailwindCSS 4 and React 19.