hippo-ui — copy-paste React components

Button

components/ui/button.tsx

Clickable button with variants, sizes, loading state.

Badge

components/ui/badge.tsx

Status label with color variants and icon support.

PrimarySecondaryOutlineDangerSuccessWarningInfoVerified

Card

components/ui/card.tsx

Container with header, content, footer.

A simple card. Compose anything inside.

Input

components/ui/input.tsx

Text input with optional left/right icons.

FileInput

components/ui/file-input.tsx

File picker with drag-and-drop and image preview.

Click to upload or drag and drop

image/*

Label

components/ui/label.tsx

Form label with top/bottom/left/right positioning.

Top

Bottom

Left

Right

Separator

components/ui/separator.tsx

Horizontal or vertical divider.

Above

Below

Skeleton

components/ui/skeleton.tsx

Loading placeholder.

Spinner

components/ui/spinner.tsx

Loading indicator.

Textarea

components/ui/textarea.tsx

Multi-line text input.

Message

Checkbox

components/ui/checkbox.tsx

Binary toggle input.

Accept terms

Radio

components/ui/radio.tsx

Single-choice from group.

smallmediumlarge

Switch

components/ui/switch.tsx

On/off toggle.

SmallNotificationsLarge

Select

components/ui/select.tsx

Dropdown single-select with keyboard nav.

Portal

components/ui/portal.tsx

Render children into document.body.

Utility — see source.

Dialog

components/ui/dialog.tsx

Modal overlay with focus trap.

ConfirmModal

components/ui/confirm-modal.tsx

Confirm/cancel modal.

Sheet

components/ui/sheet.tsx

Side-anchored slide-out panel.

Popover

components/ui/popover.tsx

Floating panel anchored to trigger.

Tooltip

components/ui/tooltip.tsx

Hover hint.

DropdownMenu

components/ui/dropdown-menu.tsx

Menu with keyboard nav.

Toast

components/ui/toast.tsx

Imperative notification via custom store.

Alert

components/ui/alert.tsx

Inline status message.

Heads up!

New update available.

Error

Something went wrong.

Avatar

components/ui/avatar.tsx

User image with fallback initials.

JDAB

Progress

components/ui/progress.tsx

Linear progress bar.

Breadcrumb

components/ui/breadcrumb.tsx

Hierarchy navigation.

EmptyState

components/ui/empty-state.tsx

Placeholder for empty views.

No messages

When you receive messages, they'll show up here.

Tabs

components/ui/tabs.tsx

Tab panels.

Account settings here.

Accordion

components/ui/accordion.tsx

Collapsible sections.

Yes. Follows WAI-ARIA patterns.

Table

components/ui/table.tsx

Semantic table primitives.

Name	Role	Status
Ada Lovelace	Admin	Active
Alan Turing	Editor	Active

Sidebar

components/ui/sidebar.tsx

Collapsible app sidebar.

Combobox

components/ui/combobox.tsx

Searchable single-select.

Calendar

components/ui/calendar.tsx

Month calendar (date-fns).

April 2026

Su

Mo

Tu

We

Th

Fr

Sa

DatePicker

components/ui/date-picker.tsx

Date input with calendar popover.

DateTimePicker

components/ui/date-time-picker.tsx

Date + time input with calendar popover.

CommandPalette

components/ui/command-palette.tsx

Cmd+K fuzzy search (cmdk).

Press ⌘K / Ctrl+K to toggle

DataTable

components/ui/data-table.tsx

Sortable filterable paginated table (@tanstack/react-table).


Ada Lovelace	ada@example.com	Admin
Alan Turing	alan@example.com	Editor
Grace Hopper	grace@example.com	Admin

Page 1 of 2

Components