FRȘah Design System

Utilities

Supporting Shadcn primitives for menus, grouped inputs, loading states and layout helpers. Import each component from @/components/Shadcn/.

Dropdown menu

Contextual menus for actions, filters, and column options.

Default

import { Button } from '@/components/Shadcn/button';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/Shadcn/dropdown-menu';

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="outline">Actions</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuLabel>Member</DropdownMenuLabel>
    <DropdownMenuItem>View profile</DropdownMenuItem>
    <DropdownMenuItem>Edit details</DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem variant="destructive">Remove</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Input group

Grouped inputs with icons, buttons, or addons on either side.

import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from '@/components/Shadcn/input-group';

<InputGroup>
  <InputGroupAddon align="inline-start">
    <Search className="size-4" />
  </InputGroupAddon>
  <InputGroupInput placeholder="Search member" />
</InputGroup>

Password

import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
} from '@/components/Shadcn/input-group';

<InputGroup>
  <InputGroupInput type="password" placeholder="Password" />
  <InputGroupAddon align="inline-end">
    <InputGroupButton aria-label="Toggle password visibility">
      <Eye className="size-4" />
    </InputGroupButton>
  </InputGroupAddon>
</InputGroup>

Tooltip

Short hints on hover or focus for icons and compact controls.

Default

import { Button } from '@/components/Shadcn/button';
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from '@/components/Shadcn/tooltip';

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger asChild>
      <Button variant="outline" size="icon-sm">?</Button>
    </TooltipTrigger>
    <TooltipContent>FIDE rating updated weekly.</TooltipContent>
  </Tooltip>
</TooltipProvider>

Collapsible

Expandable sections for filters, FAQs, and nested navigation.

Default

import { Button } from '@/components/Shadcn/button';
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from '@/components/Shadcn/collapsible';

<Collapsible>
  <CollapsibleTrigger asChild>
    <Button variant="ghost">Tournament filters</Button>
  </CollapsibleTrigger>
  <CollapsibleContent className="pt-2 text-sm text-muted-foreground">
    Filter by category, rating range, or registration status.
  </CollapsibleContent>
</Collapsible>

Scroll area

Scrollable containers with styled overflow for long lists and panels.

Alexandru Popescu

Maria Ionescu

Andrei Georgescu

Elena Dumitrescu

Radu Marin

Ioana Stan

Victor Enache

Diana Popa

Default

import { ScrollArea } from '@/components/Shadcn/scroll-area';

<ScrollArea className="h-28 rounded-md border p-3">
  {members.map((member) => (
    <p key={member.id} className="text-sm">{member.name}</p>
  ))}
</ScrollArea>

Progress

Determinate progress for uploads, imports, and multi-step flows.

Default

import { Progress } from '@/components/Shadcn/progress';

<Progress value={66} />

Spinner

Indeterminate loading indicator for buttons and inline states.

Default

import { Spinner } from '@/components/Shadcn/spinner';

<Spinner className="size-4" />

In button

import { Button } from '@/components/Shadcn/button';

<Button isLoading={isLoading}>Save changes</Button>

Skeleton

Placeholder shapes while content is loading.

Default

import { Skeleton } from '@/components/Shadcn/skeleton';

<div className="space-y-2">
  <Skeleton className="h-4 w-3/4" />
  <Skeleton className="h-4 w-1/2" />
</div>

Table rows

<div className="space-y-2">
  <Skeleton className="h-8 w-full" />
  <Skeleton className="h-8 w-full" />
  <Skeleton className="h-8 w-full" />
</div>