Components

React component library built on design tokens.

Button

Interactive element with 4 variants and 4 sizes. Supports loading and disabled states.

import { Button } from '@ghiberti85/ui'

Badge

Small pill-shaped label for status and metadata.

DefaultSecondaryDestructiveOutline

import { Badge } from '@ghiberti85/ui'

Card

Flexible container with compound sub-components.

Card Title

A short description of the card content.

This is the card body. It can contain any content.

import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@ghiberti85/ui'

Form Components

Input

Accessible text input with label, error, and disabled states.

EmailPlease enter a valid email address.

Email (disabled)

import { Input } from '@ghiberti85/ui'

Textarea

Multi-line text input with optional label, helper text, and error state.

MessageUp to 500 characters.

MessageMessage is required.

Message (disabled)

import { Textarea } from '@ghiberti85/ui'

Select

Accessible dropdown built on Radix UI. Supports error and disabled states.

Fruit

FruitPlease select a fruit.

Fruit (disabled)

import { Select } from '@ghiberti85/ui'

Checkbox

Accessible checkbox with checked, unchecked, and indeterminate states.

Accept marketing emails

Accept terms and conditionsYou can change this in your account settings.

Select all (indeterminate)

Disabled option

import { Checkbox } from '@ghiberti85/ui'

Radio / RadioGroup

Accessible radio group for single-selection from a set of options.

Preferred contact method

EmailWe'll send updates to your inbox.

PhoneWe'll call you during business hours.

SMSShort text messages to your mobile.

import { Radio, RadioGroup } from '@ghiberti85/ui'

Switch

Toggle switch for boolean preferences. Supports label, description, and disabled.

Dark mode

Notifications

Beta featuresEnable experimental features. May be unstable.

Airplane mode (disabled)

import { Switch } from '@ghiberti85/ui'

Combobox

Searchable select built on Popover with real-time filtering, keyboard navigation, and accessible ARIA attributes.

import { Combobox } from '@ghiberti85/ui'

NumberInput

Numeric input with stepper buttons, min/max clamping, prefix/suffix, and precision control.

Quantity

import { NumberInput } from '@ghiberti85/ui'

FileUpload

Drag-and-drop file upload zone with file previews and validation.

Drop files hereAny file type

import { FileUpload } from '@ghiberti85/ui'

OTPInput

A one-time password input with individual digit boxes, auto-advance, and paste support.

import { OTPInput } from '@ghiberti85/ui'

TagInput

A multi-value text input that creates removable Chip tags on Enter or comma.

ReactTypeScript

import { TagInput } from '@ghiberti85/ui'

Display Components

Dialog

Modal dialog built on Radix UI with overlay, title, description, and action buttons.

import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, DialogClose } from '@ghiberti85/ui'

Separator

Thin visual divider for separating content sections.

Section A

Section B

import { Separator } from '@ghiberti85/ui'

Typography

Heading, Text, Label, and Code components built on design token typography scales.

Heading sizes

Heading 4xl — Display

Heading 3xl — Title

Heading 2xl — Section

Heading xl — Subsection

Text sizes

Text xl — Large body copy for introductions.

Text lg — Slightly larger body copy.

Text md — Default body text for most content.

Text sm — Smaller helper or secondary text.

Text xs — Captions and fine print.

Form label

Code

Inline: const greeting = 'hello'

function greet(name: string) {
  return `Hello, ${name}!`
}

import { Heading, Text, Label, Code } from '@ghiberti85/ui'

Tooltip

Accessible floating label on hover or focus, powered by Radix UI.

import { Tooltip } from '@ghiberti85/ui'

Avatar

Displays a user profile image with automatic initials fallback. 5 sizes, circle and square shapes.

import { Avatar } from '@ghiberti85/ui'

Tabs

Layered sections of content displayed one at a time. Built on Radix UI with keyboard navigation.

Manage your account settings.

import { Tabs, TabsList, TabsTrigger, TabsContent } from '@ghiberti85/ui'

Accordion

Vertically stacked interactive headings that each reveal a section of content. Supports single and multiple open items.

Design tokens are the visual design atoms — colors, spacing, and typography stored as named variables.

import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@ghiberti85/ui'

Toast

Temporary feedback messages that appear and auto-dismiss. Supports default, success, warning, error, and info variants.

import { Toaster, useToast } from '@ghiberti85/ui'

Table

Responsive data table with header, body, footer, and caption. Supports striped rows.

Recent invoices.
Invoice	Status	Method	Amount
INV-001	Paid	Credit Card	$250.00
INV-002	Pending	Bank Transfer	$150.00
INV-003	Paid	PayPal	$350.00
Total			$750.00

import { Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption } from '@ghiberti85/ui'

Progress

Animated progress bar with 5 variants (default/success/warning/error/info) and 3 sizes.

import { Progress } from '@ghiberti85/ui'

Skeleton

CSS shimmer placeholder for loading states. Includes SkeletonText and SkeletonAvatar helpers.

import { Skeleton, SkeletonText, SkeletonAvatar } from '@ghiberti85/ui'

Alert

Contextual feedback messages with 4 variants, optional title, built-in icons, and dismiss button.

Info

This is an informational alert.

Success

Operation completed.

Warning

Proceed with caution.

Error

Something went wrong.

import { Alert } from '@ghiberti85/ui'

Popover

Floating panel built on Radix UI. Supports all 4 sides, arrow, and animated open/close.

import { Popover, PopoverTrigger, PopoverContent, PopoverClose } from '@ghiberti85/ui'

Spinner

CSS-only loading spinner. 4 sizes, 4 variants, accessible label.

SmallMediumLargeExtra Large

import { Spinner } from '@ghiberti85/ui'

DropdownMenu

Context menu built on Radix UI. Supports items, labels, separators, checkboxes, radio groups, submenus, and keyboard shortcuts.

import { DropdownMenu, … } from '@ghiberti85/ui'

AlertDialog

Modal confirmation dialog built on Radix UI. Blocks interaction until the user responds. Supports a destructive action variant.

import { AlertDialog, … } from '@ghiberti85/ui'

Calendar

Month-view calendar for date selection. Supports single, multiple, and range modes.

July 2026

import { Calendar } from '@ghiberti85/ui'

DatePicker

Date picker popover built on Calendar. Supports single date and date range selection.

import { DatePicker } from '@ghiberti85/ui'

Timeline

Vertical chronological list of events with variants and custom icons.

Jan 2024
Project started
Mar 2024
Beta launched
Jun 2024
v1.0 released

import { Timeline } from '@ghiberti85/ui'

Slider

Draggable range input with optional marks, min/max, and step control.

import { Slider } from '@ghiberti85/ui'

Chip

Compact label with optional remove button, icon, and color variants.

ReactTypeScriptActiveDraft

import { Chip } from '@ghiberti85/ui'

Rating

Clickable star rating with read-only mode and configurable max.

import { Rating } from '@ghiberti85/ui'

Stepper

Multi-step progress indicator with pending, active, completed, and error states.

Account
Profile
Done

import { Stepper } from '@ghiberti85/ui'

DataTable

A sortable, searchable table component with column definitions and flexible rendering.

Name	Role
Alice	Engineer
Bob	Designer

import { DataTable } from '@ghiberti85/ui'

ChatMessage

Chat bubble components for user, assistant, and system messages with timestamps and avatars.

Hello!

Hi there!

import { ChatMessage } from '@ghiberti85/ui'

StreamingText

Animates text character by character with a blinking cursor, simulating LLM streaming output.

Streaming text animation...

import { StreamingText } from '@ghiberti85/ui'

EmptyState

Zero-data placeholder with icon, title, description, and an optional action button. Includes 4 semantic variants.

No results found

Try adjusting your search terms.

import { EmptyState } from '@ghiberti85/ui'

Layout Components

Stack

Flex container for composing vertical and horizontal layouts with gap control.

Vertical stack (gap 3)

Item 1Item 2Item 3

Horizontal stack (gap 4)

Item 1Item 2Item 3

import { Stack } from '@ghiberti85/ui'

Container

Centered max-width wrapper. Available sizes: sm, md, lg, xl, full.

Container sm — max 640 px

Container md — max 768 px

Container lg — max 1024 px

import { Container } from '@ghiberti85/ui'

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

Item 11

Item 12

Item 13

Item 14

Item 15

import { ScrollArea } from '@ghiberti85/ui'