UI Components
Foundation UI primitives from the SiteKnock UI kit — buttons, cards, inputs, selects, badges, menus, and theme contexts.
Overview
@siteknock/ui provides the foundation primitives every SiteKnock frontend is built from. They're themed by your branding, accessible, and ready to compose.
Import pattern
Primitives are imported via subpath exports:
import { Button } from "@siteknock/ui/button"
import { Card, CardHeader, CardTitle } from "@siteknock/ui/card"
Common primitives
Button
import { Button } from "@siteknock/ui/button"
<Button variant="default">Save</Button>
<Button variant="destructive" size="sm">Delete</Button>
<Button variant="outline" size="lg">Cancel</Button>
<Button variant="ghost" size="icon"><TrashIcon /></Button>
Variants: default, destructive, outline, secondary, ghost, link. Sizes: default, sm, lg, icon.
Card, Input, Select, Badge, Menus
import { Card, CardHeader, CardTitle, CardContent, CardFooter } from "@siteknock/ui/card"
import { Input } from "@siteknock/ui/input"
import { Label } from "@siteknock/ui/label"
import { Select, SelectTrigger, SelectContent, SelectItem, SelectValue } from "@siteknock/ui/select"
import { Badge } from "@siteknock/ui/badge"
import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from "@siteknock/ui/dropdown-menu"
Theming
Wrap your app in the theme provider and offer a theme switcher:
import { SkThemeProvider } from "@siteknock/ui/theme-provider"
import { ThemeSwitcher } from "@siteknock/ui/theme-switcher"
<SkThemeProvider defaultTheme="system">
<ThemeSwitcher data-testid="theme-switcher" />
{children}
</SkThemeProvider>
Image upload control
A storage-aware uploader for avatars and logos, with draft preview, drag-to-pan, and resize-before-save:
import { ImageUploadControl, type ImageUploadControlHandle } from "@siteknock/ui/image-upload-control"
It supports preview presets (circle, square, wide, tall) and integrates with your storage configuration.
Building your own
To add a custom primitive: create it in your app's src/components/, compose it from the UI kit, add data-testid to interactive elements, and use relative units (rem) for layout.