Frontend: UI Component Library (shadcn/ui)
Relevant source files
The following files were used as context for generating this wiki page:The frontend of the LLaMa Leaks project is built using a UI component library based on shadcn/ui. This is not a traditional component library published as an npm package. Instead, it's a collection of reusable, composable, and accessible UI components that are directly integrated into the project's source code. These components are built upon a foundation of Radix UI for accessibility and headless logic, and styled with Tailwind CSS for utility-first styling.
This architecture allows for maximum flexibility and ownership over the code. The components are configured via components.json and themed using CSS variables, providing a consistent look and feel across the application, including support for both light and dark modes. The library includes a wide range of components, from basic elements like buttons and cards to more complex ones like sheets and charts.
Configuration and Theming
The UI library's configuration is managed through components.json and src/index.css, which define the structure, styling, and theming of the components.
components.json
This file specifies the core configuration for the shadcn/ui components, including the styling framework, color theme, and path aliases.
| Key | Value | Description |
|---|---|---|
style | default | The default style provided by shadcn/ui. |
rsc | false | Indicates that React Server Components are not used. |
tsx | true | Components are written in TypeScript with JSX. |
tailwind.config | tailwind.config.ts | Path to the Tailwind CSS configuration file. |
tailwind.css | src/index.css | Path to the main CSS file where Tailwind directives and custom CSS variables are defined. |
tailwind.baseColor | slate | The base color palette used for generating shades. |
tailwind.cssVariables | true | Enables the use of CSS variables for theming. |
aliases.components | @/components | Path alias for general components. |
aliases.utils | @/lib/utils | Path alias for utility functions like cn. |
aliases.ui | @/components/ui | Path alias for the core shadcn/ui components. |
Sources: frontend/components.json
Theming with CSS Variables
Theming is implemented using CSS variables defined within the @layer base in src/index.css. This file defines separate color palettes for light (:root) and dark (.dark) modes, allowing for seamless theme switching.
The diagram below illustrates the flow from configuration to final styling.
This diagram shows how components.json configures both the Tailwind CSS processor and the base styles/variables in src/index.css, which together produce the final styled components.
Sources: frontend/components.json, frontend/src/index.css:7-101
A snippet from the CSS file shows the variable definitions for the light theme:
/* frontend/src/index.css:8-28 */
:root {
--background: 210 50% 96%;
--foreground: 210 20% 12%;
--card: 210 40% 98%;
--card-foreground: 210 20% 12%;
--popover: 210 40% 98%;
--popover-foreground: 210 20% 12%;
--primary: 210 100% 47%;
--primary-foreground: 210 50% 98%;
--secondary: 210 35% 92%;
--secondary-foreground: 210 20% 12%;
--muted: 210 35% 92%;
--muted-foreground: 210 15% 45%;
--accent: 25 95% 53%;
--accent-foreground: 210 20% 8%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 50% 98%;
--border: 210 25% 88%;
--input: 210 25% 88%;
--ring: 210 100% 47%;
--radius: 0.5rem;
}
Sources: frontend/src/index.css:8-48
Core Dependencies
The UI component library is built on several key dependencies listed in package.json.
| Package | Version | Role |
|---|---|---|
@radix-ui/react-* | ^1.x | Provides headless, accessible, and unstyled primitives for building components (e.g., Dialog, Dropdown, Checkbox). |
tailwindcss | ^3.4.11 | A utility-first CSS framework for styling the components. |
class-variance-authority | ^0.7.1 | A library for creating type-safe component variants with Tailwind CSS. |
clsx | ^2.1.1 | A tiny utility for constructing className strings conditionally. |
tailwind-merge | ^2.5.2 | A utility to merge Tailwind CSS classes in JS without style conflicts. |
tailwindcss-animate | ^1.0.7 | A Tailwind CSS plugin for adding enter/exit animations. |
lucide-react | ^0.462.0 | A library of simply designed icons. |
recharts | ^2.12.7 | A composable charting library used for components like Chart. |
Sources: frontend/package.json:13-60
The following diagram shows the dependency stack for a typical UI component.
Component Architecture: The Sheet Component
The Sheet component (frontend/src/components/ui/sheet.tsx) is a prime example of the library's architecture. It provides a slide-out panel that can appear from any side of the screen.
Composition
The Sheet is not a monolithic component but a collection of smaller, composable parts, built on top of the @radix-ui/react-dialog primitive. This composition provides developers with fine-grained control over the component's structure and behavior.
This diagram shows the Sheet component family, where Sheet is the root and other components like SheetTrigger and SheetContent are used to build the final UI.
Sources: frontend/src/components/ui/sheet.tsx:10-141
Variants with CVA
The SheetContent component uses class-variance-authority (CVA) to manage its visual variants, specifically the side from which it appears. The sheetVariants function defines the base classes and the classes for each variant.
Variant (side) | Description |
|---|---|
top | Slides in from the top of the viewport. |
bottom | Slides in from the bottom of the viewport. |
left | Slides in from the left of the viewport. |
right (default) | Slides in from the right of the viewport. |
Sources: frontend/src/components/ui/sheet.tsx:34-54
Here is the CVA definition from the source code:
// frontend/src/components/ui/sheet.tsx:34-54
const sheetVariants = cva(
"fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
{
variants: {
side: {
top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
bottom:
"inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
right:
"inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
},
},
defaultVariants: {
side: "right",
},
}
)
Sources: frontend/src/components/ui/sheet.tsx:34-54
Component Usage in Practice
The pages and components throughout the application demonstrate how these base UI components are composed to build complex user interfaces. The About.tsx page is a clear example, using Card, Button, and Badge components to structure its content.
Example: About.tsx Page
The About page uses a grid of Card components to present information. Each card is composed of CardHeader, CardTitle, and CardContent.
This flowchart illustrates how the About.tsx page composes multiple Card components within a grid, and how each Card is itself composed of smaller parts.
Sources: frontend/src/pages/About.tsx:4-7, 30-157
The following snippet shows the import and usage of these components:
// frontend/src/pages/About.tsx:4-7
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Shield, AlertTriangle, Eye, Users, Code, Lightbulb, BookOpen, Heart } from "lucide-react";
// frontend/src/pages/About.tsx:40-54
<Card className="border-primary/20 bg-gradient-to-br from-primary/5 to-blue-500/5">
<CardHeader>
<CardTitle className="text-xl flex items-center gap-2">
<Shield className="h-5 w-5 text-primary" />
What We Do
</CardTitle>
</CardHeader>
<CardContent className="space-y-3 text-sm leading-relaxed">
<p>
We passively monitor publicly exposed Ollama AI servers and display them in an educational (and slightly sarcastic) way. No hacking, no exploitation—just observing what's already visible to anyone with a port scanner.
</p>
...
</CardContent>
</Card>
Sources: frontend/src/pages/About.tsx:4-7, 40-54
Summary
The frontend's UI library, based on shadcn/ui, provides a powerful and flexible system for building the LLaMa Leaks application. By combining Radix UI primitives, Tailwind CSS, and a composable component architecture, it enables the rapid development of a consistent, themeable, and accessible user interface. The decision to vendor the components directly into the codebase gives developers full control over their implementation, making it easy to customize and extend them to fit the project's specific needs.