UI library
Accessible components for PostHog.com, built on Base UI and styled for the site.
Each component keeps the Base UI part names and props, so the Base UI docs apply. Import one component per path, for example import { Select } from 'components/UI/Select'. The conventions are in src/components/UI/README.md.
Each page gives defaults for when to use the component and each variant. These are defaults, not laws. Break one when you have a good reason, or when it makes the design more cohesive or more interesting.
Components
Accessible building blocks for forms, menus, overlays, and data.
Foundations
Actions
- ButtonFlat and raised buttons, icon buttons, and groups.
- FloatingButtonA liquid glass button that floats over images, video, and content.
- ButtonLinkA link that looks like a button.
- ToggleButtons that stay pressed, alone or in a group.
- ToolbarA row of controls with arrow-key navigation.
- CopyButtonA button that copies text and confirms it.
- SplitButtonA main action with a menu of related actions.
Inputs
- Field and InputLabels, descriptions, and validation for inputs.
- TextareaA multi-line text input that can grow with its content.
- Form and FieldsetGroup fields, validate them, and submit their values.
- CheckboxChecked, unchecked, and indeterminate, alone or in a group.
- RadioOne choice from a set.
- SwitchAn on/off control for settings.
- SliderPick a value or a range by dragging.
- SelectPick one option from a list.
- ComboboxA select that filters as you type, with one or many values.
- AutocompleteFree text with suggestions.
- NumberFieldA number input with step arrows and a scrub area.
- ChoiceboxLarge selectable cards for one or many choices.
- SearchInputA search field with an icon, a clear button, and a shortcut hint.
Overlays
- DialogA modal window on window glass.
- AlertDialogA dialog that needs an answer before it closes.
- DrawerA panel that slides in from an edge.
- PopoverInteractive content anchored to a trigger.
- TooltipShort hints on hover and focus.
- PreviewCardA card that previews a link on hover.
- MenuActions, checkboxes, radios, and submenus in a dropdown.
- ContextMenuA menu that opens on right-click or long press.
- ToastStacked notifications with actions.
Disclosure
Feedback
Display
- AvatarAn image with a fallback, alone or stacked.
- ChipA small label with an optional image, icon, or remove button.
- ChartsLine, bar, pie, and sparkline charts in the site colors.
- Progress and MeterShow a task that runs, or a fixed amount.
- SeparatorA horizontal or vertical line.
- ScrollAreaA scroll container with custom scrollbars.
- BadgeA short label for a status, a plan, or a category.
- KbdKeyboard keys and shortcuts.
- SnippetCode in a sentence, or a command with a copy button.
- TableRows and columns of data.
- RelativeTimeA time like 3 days ago, with the exact date on hover.
- CodeBlockHighlighted code with a file name, a copy button, and language tabs.
- VideoA product video with light and dark sources.
- MiddleTruncateLong text that keeps its start and end visible.
Design
Visual pieces for front-facing pages: text accents, stickers, carousels, galleries, and motion. Use them to present information in a way that fits the PostHog brand.