UI Components

Overview

Linch Desktop Core includes a set of UI components based on shadcn/ui that can be imported and used directly.

Import

import {
  Button,
  Badge,
  Dialog,
  DropdownMenu,
  ScrollArea,
  Separator,
  Switch,
  Tabs,
  Tooltip,
} from '@linch-tech/desktop-core';

Button

Button component with multiple variants and sizes.

import { Button, buttonVariants } from '@linch-tech/desktop-core';

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

// Sizes
<Button size="sm">Small</Button>
<Button size="default">Default</Button>
<Button size="lg">Large</Button>
<Button size="icon">Icon</Button>

// Disabled state
<Button disabled>Disabled</Button>

Badge

Badge component for status indicators.

import { Badge, badgeVariants } from '@linch-tech/desktop-core';

<Badge>Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="destructive">Destructive</Badge>
<Badge variant="outline">Outline</Badge>

Dialog

Dialog component.

import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
  DialogClose,
} from '@linch-tech/desktop-core';

<Dialog>
  <DialogTrigger asChild>
    <Button>Open Dialog</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Title</DialogTitle>
      <DialogDescription>Description text</DialogDescription>
    </DialogHeader>
    <div>Dialog content</div>
    <DialogFooter>
      <DialogClose asChild>
        <Button variant="outline">Cancel</Button>
      </DialogClose>
      <Button>Confirm</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

DropdownMenu

Dropdown menu component.

import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuCheckboxItem,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
} from '@linch-tech/desktop-core';

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="outline">Open Menu</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuLabel>My Account</DropdownMenuLabel>
    <DropdownMenuSeparator />
    <DropdownMenuItem>Profile</DropdownMenuItem>
    <DropdownMenuItem>Settings</DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem>Log out</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

ScrollArea

Scroll area component with custom scrollbar styles.

import { ScrollArea, ScrollBar } from '@linch-tech/desktop-core';

<ScrollArea className="h-72 w-48 rounded-md border">
  <div className="p-4">
    {/* Large content */}
  </div>
</ScrollArea>

// Horizontal scrolling
<ScrollArea className="w-96 whitespace-nowrap rounded-md border">
  <div className="flex w-max space-x-4 p-4">
    {/* Horizontal content */}
  </div>
  <ScrollBar orientation="horizontal" />
</ScrollArea>

Separator

Separator component.

import { Separator } from '@linch-tech/desktop-core';

<Separator />
<Separator orientation="vertical" className="h-4" />

Switch

Switch component.

import { Switch } from '@linch-tech/desktop-core';

const [enabled, setEnabled] = useState(false);

<Switch checked={enabled} onCheckedChange={setEnabled} />
<Switch disabled />

Tabs

Tabs component.

import { Tabs, TabsList, TabsTrigger, TabsContent } from '@linch-tech/desktop-core';

<Tabs defaultValue="tab1">
  <TabsList>
    <TabsTrigger value="tab1">Tab 1</TabsTrigger>
    <TabsTrigger value="tab2">Tab 2</TabsTrigger>
  </TabsList>
  <TabsContent value="tab1">Tab 1 content</TabsContent>
  <TabsContent value="tab2">Tab 2 content</TabsContent>
</Tabs>

Tooltip component.

import {
  Tooltip,
  TooltipTrigger,
  TooltipContent,
  TooltipProvider,
} from '@linch-tech/desktop-core';

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger asChild>
      <Button variant="outline">Hover me</Button>
    </TooltipTrigger>
    <TooltipContent>
      <p>Tooltip content</p>
    </TooltipContent>
  </Tooltip>
</TooltipProvider>

Style Customization

All components support the className prop for style customization:

<Button className="bg-gradient-to-r from-pink-500 to-yellow-500">
  Gradient Button
</Button>

Use the cn utility function to merge class names:

import { cn } from '@linch-tech/desktop-core';

<Button className={cn("custom-class", isActive && "active")} />

UI Components

On this page