Panel UI components

High-performance React Native and React components .

Components: 210
Framework: React Native
Stack: React, React Native, TypeScript, Tailwind, StyleSheet
License: MIT
GitHub stars: 806
Source: https://github.com/panel-ui/PanelUI
Website: https://panelui.dev

All Panel UI components

Accordion: Collapsible sections with single or multiple selection.
Ai Input: A prompt composer: a field that grows to five lines, a row of controls, and the sheet they open.
Alert: Status message with a built-in icon.
Animated Badge: Status pill whose icon and label roll over when the status changes.
Area Chart: Filled bands over time, stacked or overlaid.
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.
Avatar Cropper: Frame a photo under a circle, and get that circle back as an image.
Badge: Compact status label, dot, or notification count.
Bar Chart: Categories compared by length, grouped or stacked.
Bottom Sheet: Draggable sheet anchored to the bottom of the screen.
Breadcrumb: The trail of links back up the hierarchy to the current page.
Bubble Chart: Named circles on two axes, with a third quantity on their area.
Bump Chart: How a set of things ranked against each other over time.
Button: Pressable action with variants, sizes, loading state and icon slots.
Button Group: Several buttons drawn as one control — a segmented run, a split action, a toolbar.
Calendar: A month of days, for picking one, several, or a range.
Camera: A full-screen camera you assemble from parts.
Candlestick Chart: Open, high, low and close for a period, drawn as one mark.
Card: Content surface with header, body and footer.
Carousel: A run of slides, one at a time, dragged with a finger.
Checkbox: Animated checkbox, as a row or a selectable card.
Chip: Interactive pill — a filter, a tag, or a removable token.
Circular Text: Text set around a circle, turning.
Code Block: A fenced snippet, syntax-coloured and scrolled sideways.
Color Picker: A colour chosen by dragging — a saturation square or a wheel, a hue scale, and opacity.
Compare: Two versions of one picture, with a seam you drag across it.
Countdown: The time left until a moment, ticking down to it.
Date Picker: A calendar behind a button.
Date Time Picker: A day and a time of day, picked in one panel.
Dialog: Modal dialog with a backdrop and footer actions.
Direction: Reading direction for everything below it.
Drawer: A panel that comes in from an edge of the screen and covers the app until dismissed.
Empty State: Placeholder for a list or screen with no content.
Fab: The floating action button — one action pinned over the content, with an optional dial of others behind it.
Feedback: Dialog whose body is a well to write in, with the actions in the band around it.
Field: Layout and validation-state kit a form control composes into.
File Upload: Pick files and photos, check them, and run their uploads.
Flip Card: Two faces of one card, and a turn between them.
Flow: Pan-and-zoom canvas of draggable nodes joined by animated edges.
Form: Form state — values, validation and submission — with no form library underneath.
Frame: Widget shell — a card of rows sitting in a titled tray.
Funnel Chart: Where a population drained away, one step at a time.
Grid Item: Bento tiles, and the grid that places them.
Heatmap Chart: Contribution grid with a themed colour ramp and a readout.
Hex Chart: A whole broken into parts, counted out in cells.
Image Generation: The place an image will be, while it is being made.
Image Viewer: An image that opens out of the page over a blur, to zoom into and swipe through.
Input: Text field with label, description and error message.
Input Group: Input with leading and trailing decorators.
Item: Row of media, text and actions for lists and settings.
Kpi: One number, what it is doing, and the shape it made getting there.
Label: Form field label with required, invalid and disabled states.
Leaderboard: Entries ranked by a value, with the top three on a podium.
Line Chart: Animated time series, drawn on the UI thread.
Live Line Chart: A reading that keeps arriving, against a window that keeps moving.
Loader: Nine loading animations behind one variant prop.
Map: Vector map whose basemap is drawn from your theme tokens.
Markdown Editor: A field for writing markdown, with a formatting toolbar and a rendered preview.
Marker: Inline note between conversation turns.
Marquee: Content that travels across its container on a loop.
Message: Chat turn with avatar, bubble, header and footer.
Message Scroller: Scroll behaviour a chat transcript needs.
Meter: A measurement on a fixed scale, coloured by where it falls.
Mirror Area Chart: Two readings of one timeline, one above a baseline and one below it.
Number Input: Numeric field stepped by buttons or typed by hand.
Otp Input: One-time-code field drawn as a row of separate cells.
Page Header: Cover, face and actions at the top of a profile.
Pagination: Paged navigation over a long result set.
Panelside: Navigation panel that moves the app aside instead of covering it.
Pie Chart: One whole, divided between its parts.
Plan: What an agent intends to do, before it does it.
Planner: A month of days, each carrying what falls on it.
Polar Area Chart: Several readings on one scale, compared as wedges.
Popover: Panel anchored to the element that opened it.
Post: A social card — author, body, media and the counts underneath, with the votes animated.
Progress: Determinate and indeterminate progress bar.
Progress Button: Press and hold to confirm, with the wait drawn on the button.
Pyramid Chart: Two series mirrored about a centre, on one shared scale.
Qr Code: A string a camera can read — framed, titled, or folded away behind a button.
Questionnaire: One question at a time, with progress, validation and a way back.
Radar Chart: Several measures of one thing, drawn as one shape.
Radio Group: Single-select list of options.
Rating: A row of stars to read or set a score.
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.
Ring Chart: Concentric arcs, each measured against its own target.
Scatter Chart: Two quantities against each other, to show how they relate.
Scroll Canvas: Image frame whose contents move as you scroll.
Scroll Fade: Fades the edges of a scroll container.
Scroll Header: A screen title that hands over to a compact bar as the page scrolls.
Scroll Text: Text that resolves word by word as you scroll.
Search Bar: Search field with a clear button, a Cancel button and a panel of results.
Section Progress: Floating pill with a scroll ring and the section being read.
Section Rail: Floating section navigator for a long screen.
Select: Picker shown in a bottom sheet, expanded in place, or floating over the page.
Separator: Horizontal or vertical rule between content, optionally labelled.
Shimmer: Animated highlight sweeping across content.
Signature: Sign with a finger, and get the result back out as SVG or PNG.
Skeleton: Shimmer placeholder for loading content.
Sketch: Draw with a pen, shapes and an eraser, in a sheet or a whole screen.
Slide Button: Drag across to confirm, with the distance drawn on the button.
Slider: Pick a value, or a span, by dragging a thumb along a track.
Sortable: A list whose rows can be dragged into a different order.
Soundwave: What a voice looks like while an app listens.
Sources: Where an answer came from, folded under a count.
Spinner
Stack Card: A pile of cards, taken one at a time by throwing the top one off.
Steps: Stepper for multi-step flows.
Support: The screen a person arrives on when they need help.
Surface: Elevated container with a variant ladder.
Swipe: A row that slides aside to reveal the things you can do to it.
Switch
Table: Rows and columns that stay lined up, with sortable headers.
Tabs: Segmented navigation with an animated indicator.
Task: One step an agent took, and what it did while it was there.
Text Animation: Five ways a piece of text or a number arrives.
Textarea: Text field that runs to several lines, sized in rows.
Theme Selector: Light, dark or the device's setting, drawn as three miniature screens.
Thinking Orb: Dotted orb saying which kind of busy an agent is.
Time Picker: A time of day, as a wheel, a clock or a swipeable scale.
Timeline: A sequence of events, vertical or swiped sideways.
Toggle Button: A button that stays down, on its own or in a group.
Tooltip: A small label that names the control under your finger.
Tour: A walkthrough that introduces a screen one control at a time.
Tree: A hierarchy you can open a level at a time.
Treemap Chart: A total, cut into the parts it is made of, sized by area.
Typography
Web Alert
Web Alert Dialog
Web Area Chart: Area charts with replay, hover readout and variants such as budget lines and stacked series.
Web Avatar
Web Badge: Small status and label badges with icons, in several tones.
Web Bar Chart: Bar charts with replay, keyboard reading and grouped or horizontal variants.
Web Bar Picker
Web Breadcrumb: Breadcrumb trails with separators, collapsed middles and long-title truncation.
Web Bubble Chart: A bubble chart plotting three values per point, such as growth, margin and revenue.
Web Bump Chart: A bump chart that shows how rankings change over time, read by hover or keyboard.
Web Button
Web Button Group: Grouped buttons for toolbars, sort menus and split actions.
Web Candlestick Chart: A candlestick chart for daily price data with a hover readout.
Web Canvas
Web Card
Web Checkbox: Checkboxes with labels and helper text for forms and settings.
Web Chip: Chips for filters, tags and stock or status labels.
Web Choice Cards: Selectable option cards for picking sizes, backgrounds or quality settings.
Web Combobox: A searchable combobox with single and multiple selection and tag chips.
Web Command: A command palette for an editor: search, grouped commands, shortcuts and a loading state.
Web Command Dock
Web Day Grid
Web Dialog
Web Feedback
Web Field: Form fields with label, control, helper text and validation message.
Web Flow
Web Frame
Web Funnel Chart: A funnel chart showing conversion between stages, with share of the first and previous stage.
Web Heatmap Chart: A calendar heatmap for a year of activity such as commits, deploys or spending.
Web Hex Chart: A hexagon grid chart for attribution and fill rates, with replay and hover.
Web Input
Web Inspector: A design inspector panel with alignment, color, fill, text and shadow controls.
Web Kpi
Web Label
Web Lane Board
Web Line Chart: Line charts with drag to inspect, averages and replay.
Web Live Line Chart: A live line chart that streams values in real time, such as requests per second.
Web Menu
Web Message
Web Mirror Area Chart: A mirrored area chart comparing two series above and below one axis.
Web Model Picker: An AI model picker with logos and context, speed, intelligence and price per model.
Web Nav Rail: A side navigation rail that folds to icons, with sections, badges and keyboard control.
Web Not Found
Web Pagination: Pagination controls with page counts and compact variants for tables and search results.
Web Pie Chart: A pie chart with hover detail and toggles to show or hide slices.
Web Planet
Web Plot: A general plot for budgets and change against plan, with selectable points.
Web Polar Area Chart: A polar area chart comparing scores across categories.
Web Prompt
Web Pyramid Chart: A population pyramid chart with two sides read by hover.
Web Radar Chart: A radar chart comparing a profile against a team across several axes.
Web Radio Group: Radio groups with descriptions and disabled options.
Web Range Meter
Web Ring Chart: Activity rings that fill toward daily goals, with replay and toggles.
Web Rolling Number
Web Sankey Chart: A Sankey chart showing flows from sources to categories.
Web Scatter Chart: A scatter chart plotting spend against revenue or dose against response.
Web Scroll Header: A page header that shrinks and turns to glass as you scroll, with share and bookmark actions.
Web Select
Web Sheet
Web Slider: Sliders for photo adjustments and zoom, with step buttons.
Web Soundwave
Web Spinner: Spinners and progress messages for builds, queues and waiting states.
Web Stat
Web Steps: A step indicator for multi-step flows such as checkout, with back and next.
Web Switch
Web Table: A plain data table for inventory and member lists.
Web Table Of Contents: An on-this-page table of contents that tracks the section in view.
Web Tabs
Web Textarea
Web Tilt Card
Web Timeline: A video editing timeline with clips, playback and undo and redo.
Web Toast: Toasts for actions such as archive, publish and deploy, with progress and undo.
Web Toolbar: An editor toolbar with tools, undo, redo and zoom.
Web Tooltip: Tooltips with icons, longer descriptions and keyboard access.
Web Treemap Chart: A treemap of spend by category that highlights what is over budget.
Web Usage: A usage and credits panel for an AI app: credit used, renewal date and context compaction.
Web Waterfall Chart: A waterfall chart for revenue bridges and budget variance.
Web Workbench: A media workbench with camera, backdrop, lighting and playback controls.
Web Xy Pad: A two-axis pad for setting a pair of values at once, such as light position.
Week Hours Grid: A week of hours, one row per day, with the taken parts filled in.
Week Strip: One row of days to pick from, with marks for what is on each.

Panel UI components

All Panel UI components

Browse by category