Components
Every component module in PanelUI, by what it is for — 135 component modules, each with its anatomy, props and variants.
All 135 component modules, grouped by the job they do. Every page covers the anatomy, every prop and every variant, read straight from the library's TypeScript so it cannot drift from the code.
Actions
The things a screen can be told to do, and the controls that ask.
Button
Pressable action with variants, sizes, loading state and icon slots.
ButtonGroup
Several buttons drawn as one control — a segmented run, a split action, a toolbar.
Chip
Interactive pill — a filter, a tag, or a removable token.
ContextMenu
Actions for a piece of content, opened by holding it.
Fab
The floating action button — one action pinned over the content, with an optional dial of others behind it.
Menu
The list of things you can do to something.
ProgressButton
Press and hold to confirm, with the wait drawn on the button.
SelectionMode
Pick several things at once, on a screen or in a sheet.
SlideButton
Drag across to confirm, with the distance drawn on the button.
StackCard
A pile of cards, taken one at a time by throwing the top one off.
Swipe
A row that slides aside to reveal the things you can do to it.
ToggleButton
A button that stays down, on its own or in a group.
Forms and input
Everything that takes a value from someone and hands it back typed.
Calendar
A month of days, for picking one, several, or a range.
Checkbox
Animated checkbox, as a row or a selectable card.
ColorPicker
A colour chosen by dragging — a saturation square or a wheel, a hue scale, and opacity.
Combobox
A text field that filters a list of options as you type.
DatePicker
A calendar behind a button.
DateTimePicker
A day and a time of day, picked in one panel.
Field
Layout and validation-state kit a form control composes into.
Form
Form state — values, validation and submission — with no form library underneath.
Input
Text field with label, description and error message.
InputGroup
Input with leading and trailing decorators.
Label
Form field label with required, invalid and disabled states.
MarkdownEditor
A field for writing markdown, with a formatting toolbar and a rendered preview.
NumberInput
Numeric field stepped by buttons or typed by hand.
OtpInput
One-time-code field drawn as a row of separate cells.
Questionnaire
One question at a time, with progress, validation and a way back.
RadioGroup
Single-select list of options.
Rating
A row of stars to read or set a score.
SearchBar
Search field with a clear button, a Cancel button and a panel of results.
Select
Picker shown in a bottom sheet, expanded in place, or floating over the page.
Signature
Sign with a finger, and get the result back out as SVG or PNG.
Slider
Pick a value, or a span, by dragging a thumb along a track.
Switch
Animated on/off toggle.
TagInput
A field whose value is a list of tokens rather than a string.
Textarea
Text field that runs to several lines, sized in rows.
ThemeSelector
Light, dark or the device's setting, drawn as three miniature screens.
TimePicker
A time of day, as a wheel, a clock or a swipeable scale.
Overlays
Surfaces that arrive over the page and leave again.
BottomSheet
Draggable sheet anchored to the bottom of the screen.
Dialog
Modal dialog with a backdrop and footer actions.
Drawer
A panel that comes in from an edge of the screen and covers the app until dismissed.
Feedback
Dialog whose body is a well to write in, with the actions in the band around it.
Popover
Panel anchored to the element that opened it.
Toast
Transient notification queue with swipe to dismiss.
Tooltip
A small label that names the control under your finger.
Navigation
Moving between places, and showing where you are in them.
Breadcrumb
The trail of links back up the hierarchy to the current page.
Pagination
Paged navigation over a long result set.
SectionProgress
Floating pill with a scroll ring and the section being read.
SectionRail
Floating section navigator for a long screen.
Sortable
A list whose rows can be dragged into a different order.
Steps
Stepper for multi-step flows.
Tabs
Segmented navigation with an animated indicator.
Tour
A walkthrough that introduces a screen one control at a time.
Tree
A hierarchy you can open a level at a time.
Layout and structure
The surfaces the rest of it sits on.
Accordion
Collapsible sections with single or multiple selection.
Card
Content surface with header, body and footer.
Carousel
A run of slides, one at a time, dragged with a finger.
Collapsible
One section of content, shown and hidden by its own header.
Direction
Reading direction for everything below it.
Frame
Widget shell — a card of rows sitting in a titled tray.
GridItem
Bento tiles, and the grid that places them.
ImageViewer
An image that opens out of the page over a blur, to zoom into and swipe through.
Item
Row of media, text and actions for lists and settings.
PageHeader
Cover, face and actions at the top of a profile.
ScrollBlur
Blurs the edges of a scroll container.
ScrollCanvas
Image frame whose contents move as you scroll.
ScrollFade
Fades the edges of a scroll container.
ScrollHeader
A screen title that hands over to a compact bar as the page scrolls.
Separator
Horizontal or vertical rule between content, optionally labelled.
Splitter
Panes that share a container, with a seam between them you can drag.
SplitView
Two resizable stacked panes that settle on one of a few named heights.
Surface
Elevated container with a variant ladder.
Typography
Semantic text presets.
Data
Rows, sequences and numbers, laid out to be read.
Flow
Pan-and-zoom canvas of draggable nodes joined by animated edges.
Kpi
One number, what it is doing, and the shape it made getting there.
Map
Vector map whose basemap is drawn from your theme tokens.
Planner
A month of days, each carrying what falls on it.
Table
Rows and columns that stay lined up, with sortable headers.
Timeline
A sequence of events, vertical or swiped sideways.
Charts
Series drawn on the UI thread, one file each, no chart library.
AreaChart
Filled bands over time, stacked or overlaid.
BarChart
Categories compared by length, grouped or stacked.
BubbleChart
Named circles on two axes, with a third quantity on their area.
BumpChart
How a set of things ranked against each other over time.
CandlestickChart
Open, high, low and close for a period, drawn as one mark.
FunnelChart
Where a population drained away, one step at a time.
HeatmapChart
Contribution grid with a themed colour ramp and a readout.
HexChart
A whole broken into parts, counted out in cells.
LineChart
Animated time series, drawn on the UI thread.
LiveLineChart
A reading that keeps arriving, against a window that keeps moving.
MirrorAreaChart
Two readings of one timeline, one above a baseline and one below it.
PieChart
One whole, divided between its parts.
Plot
A chart you assemble out of its marks.
PolarAreaChart
Several readings on one scale, compared as wedges.
PyramidChart
Two series mirrored about a centre, on one shared scale.
RadarChart
Several measures of one thing, drawn as one shape.
RingChart
Concentric arcs, each measured against its own target.
SankeyChart
Where a quantity came from and where it ended up.
ScatterChart
Two quantities against each other, to show how they relate.
TreemapChart
A total, cut into the parts it is made of, sized by area.
WaterfallChart
How a run of changes carried one total to another.
Feedback and status
Saying what happened, what is happening, and what is missing.
Alert
Status message with a built-in icon.
AnimatedBadge
Status pill whose icon and label roll over when the status changes.
Badge
Compact status label, dot, or notification count.
EmptyState
Placeholder for a list or screen with no content.
Loader
Nine loading animations behind one variant prop.
Marker
Inline note between conversation turns.
Meter
A measurement on a fixed scale, coloured by where it falls.
Progress
Determinate and indeterminate progress bar.
Skeleton
Shimmer placeholder for loading content.
Spinner
Indeterminate loading indicator.
Media and motion
Pictures, conversation and things that move.
Attachment
File row with upload states, built on Item.
Avatar
User image with an initials fallback, a badge overlay, and a stack for a group of them.
CircularText
Text set around a circle, turning.
Compare
Two versions of one picture, with a seam you drag across it.
FlipCard
Two faces of one card, and a turn between them.
Marquee
Content that travels across its container on a loop.
Message
Chat turn with avatar, bubble, header and footer.
MessageScroller
Scroll behaviour a chat transcript needs.
Post
A social card — author, body, media and the counts underneath, with the votes animated.
QRCode
A string a camera can read — framed, titled, or folded away behind a button.
ScrollText
Text that resolves word by word as you scroll.
Support
The screen a person arrives on when they need help.
TextAnimation
Five ways a piece of text or a number arrives.
AI components
The parts an assistant interface is built from.
AIInput
A prompt composer: a field that grows to five lines, a row of controls, and the sheet they open.
CodeBlock
A fenced snippet, syntax-coloured and scrolled sideways.
ImageGeneration
The place an image will be, while it is being made.
Panelside
Navigation panel that moves the app aside instead of covering it.
Plan
What an agent intends to do, before it does it.
Reasoning
The model's working, shown while it happens and folded away after.
Response
A model's answer, rendered as markdown while it is still arriving.
Shimmer
Animated highlight sweeping across content.
Soundwave
What a voice looks like while an app listens.
Sources
Where an answer came from, folded under a count.
Task
One step an agent took, and what it did while it was there.
ThinkingOrb
Dotted orb saying which kind of busy an agent is.