shadcn/ui Components (FSD)

This project uses shadcn/ui with the neutral theme and all components pre-installed.

FSD Pfad

All components are in frontend/src/shared/ui/:

Layout

• •card - Card container with header, content, footer
• •separator - Visual divider
• •aspect-ratio - Maintain aspect ratios
• •scroll-area - Custom scrollbars
• •resizable - Resizable panels

Forms

• •button - Buttons with variants
• •input - Text input
• •textarea - Multi-line input
• •label - Form labels
• •checkbox - Checkboxes
• •radio-group - Radio buttons
• •select - Dropdown select
• •switch - Toggle switch
• •slider - Range slider
• •form - Form with validation
• •input-otp - OTP input

Feedback

• •alert - Alert messages
• •alert-dialog - Confirmation dialogs
• •dialog - Modal dialogs
• •drawer - Slide-out drawer
• •sheet - Side sheet
• •sonner - Toast notifications
• •progress - Progress bar
• •skeleton - Loading skeleton
• •spinner - Loading spinner

Navigation

• •tabs - Tab navigation
• •navigation-menu - Main navigation
• •menubar - Menu bar
• •breadcrumb - Breadcrumb nav
• •pagination - Page navigation
• •sidebar - App sidebar

Data Display

• •table - Data tables
• •avatar - User avatars
• •badge - Status badges
• •calendar - Date picker calendar
• •chart - Charts (recharts)
• •carousel - Image carousel

Overlay

• •dropdown-menu - Dropdown menus
• •context-menu - Right-click menu
• •popover - Popovers
• •tooltip - Tooltips
• •hover-card - Hover cards
• •command - Command palette

Other

• •accordion - Collapsible sections
• •collapsible - Toggle content
• •toggle - Toggle button
• •toggle-group - Button group

Usage Examples

Button Variants

import { Button } from "@shared/ui/button"

<Button>Default</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="destructive">Destructive</Button>
<Button variant="link">Link</Button>

Card

import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@shared/ui/card"

<Card>
  <CardHeader>
    <CardTitle>Title</CardTitle>
    <CardDescription>Description</CardDescription>
  </CardHeader>
  <CardContent>
    Content here
  </CardContent>
  <CardFooter>
    <Button>Action</Button>
  </CardFooter>
</Card>

Form with Input

import { Input } from "@shared/ui/input"
import { Label } from "@shared/ui/label"

<div className="space-y-2">
  <Label htmlFor="email">Email</Label>
  <Input id="email" type="email" placeholder="name@example.com" />
</div>

Dialog

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@shared/ui/dialog"

<Dialog>
  <DialogTrigger asChild>
    <Button>Open Dialog</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Dialog Title</DialogTitle>
      <DialogDescription>Dialog description here.</DialogDescription>
    </DialogHeader>
    <p>Dialog content</p>
  </DialogContent>
</Dialog>

Toast (Sonner)

import { toast } from "sonner"

toast.success("Success message")
toast.error("Error message")
toast.info("Info message")

Dark Mode

Components automatically support dark mode via ThemeProvider.

Use ModeToggle from Header Widget:

import { Header } from "@widgets/header"

// ModeToggle is integrated in the Header
<Header user={session.user} />

Adding New Components

If a component is missing (unlikely, all are installed):

bunx shadcn@latest add [component-name]

Styling

Components use Tailwind CSS classes. Customize with className:

<Button className="w-full mt-4">Full Width Button</Button>

Use cn() utility for conditional classes:

import { cn } from "@shared/lib"

<div className={cn("p-4", isActive && "bg-primary")}>