Shadcn UI Core Components

Shadcn UI Core Components provide the foundational visual building blocks for the KernelForge-App user interface. This project utilizes a specialized implementation of Shadcn components optimized for a mobile-first, dark-themed Android kernel development environment. The components follow a composition-based architecture using Radix UI primitives and Tailwind CSS for styling.

The system integrates these components to build complex views like the Kernelcrafter Dashboard, which orchestrates kernel compilation, patching, and packaging. The configuration for these components is defined in components.json, specifying the use of the "neutral" base color, CSS variables, and Lucide icons.

Sources: components.json:1-20, src/app/page.tsx:5-30

Architecture and Configuration

The component architecture relies on a centralized configuration file that maps aliases to specific directories. This ensures consistent imports across the application.

{
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.ts",
    "css": "src/app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "ui": "@/components/ui",
    "hooks": "@/hooks"
  }
}

Sources: components.json:3-18

Component Relationship Flow

The diagram below illustrates how UI components interact with Radix Primitives and the main application dashboard.

Overlay and Navigation Components

Sidebar System

The Sidebar system manages the primary navigation for the application. It includes a SidebarProvider that tracks expansion states and handles mobile responsiveness through a Sheet component.

• SidebarProvider: Holds the state (expanded/collapsed) and isMobile status.
• SidebarTrigger: A button component that calls toggleSidebar to change the layout.
• SidebarInset: Provides the main content area that adjusts margins based on the sidebar's state.

Sources: src/components/ui/sidebar.tsx:23-80

Sheet and Dialog Components

Both components utilize SheetPortal or DialogPortal to render overlays that dim the background using a black/80 backdrop.

Sources: src/components/ui/sheet.tsx:11-55, src/components/ui/dialog.tsx:11-50

Data Visualization and Input

Chart Component

The ChartContainer provides a wrapper for Recharts, managing themes and responsive dimensions. It uses a ChartContext to share configuration settings like labels and icons with child elements like tooltips.

• ChartStyle: Injects dynamic CSS variables into the DOM to handle color mapping for light and dark modes.
• ChartTooltipContent: Formats data points and displays custom icons based on the nameKey or labelKey.

Sources: src/components/ui/chart.tsx:39-95

Select Component

The Select component provides a custom-styled dropdown menu. It implements SelectPrimitive from Radix UI and adds custom scrolling buttons for long lists.

• SelectTrigger: Displays the current value and a ChevronDown icon.
• SelectContent: A portal-based container that animates into view based on the trigger position.

Sources: src/components/ui/select.tsx:13-75

Button and Styling

Buttons are generated using class-variance-authority (CVA) to manage visual variants.

const buttonVariants = cva(
  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
        outline: "border border-input bg-background hover:bg-accent",
        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
        ghost: "hover:bg-accent hover:text-accent-foreground",
        link: "text-primary underline-offset-4 hover:underline",
      },
      size: {
        default: "h-10 px-4 py-2",
        sm: "h-9 rounded-md px-3",
        lg: "h-11 rounded-md px-8",
        icon: "h-10 w-10",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

Sources: src/components/ui/button.tsx:7-35

Summary

The Shadcn UI Core Components in KernelForge-App establish a consistent design language through highly reusable, accessible, and themed elements. By wrapping Radix UI primitives, the application ensures high accessibility standards while maintaining a specialized "neon" and "purple" glow aesthetic required for the kernel development dashboard. The separation of component logic from application state allows for a modular architecture where the SidebarNav and KernelcrafterDashboard can consume these elements without managing low-level UI interactions.

Sources: src/app/page.tsx:210-250, src/components/ui/sidebar.tsx:1-20