Autocomplete
A text field that suggests values as people type, and takes any text.
Jarvis UI
An obsessively pixel-perfect component library by @jakejarvis, built on Base UI.
Forms
34Buttons, toggles, inputs and the other controls people act with.
Button
A button, or a component that looks like one.
Button Group
Joins related buttons into a single control.
February 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Calendar
A month grid for picking a date, several dates or a range of them.
Checkbox
A control that toggles between checked, unchecked and indeterminate.
Checkbox Group
Shared state for a set of checkboxes, with an optional select-all parent.
Combobox
An input with a filterable list of suggestions, including multi-select chips.
ord_8HcK2vCopy Button
An icon button that copies a value and shows whether it worked.
Invite link
Copy Field
A read-only monospace value with a copy button.
February 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Date Picker
A field that opens a calendar to pick a date or a range of dates.
Shown to your team.
Use letters, numbers and dashes.
Field
Labels, descriptions and errors for form controls.
- Brand guidelines.pdf820 KB
- Launch assets.zip
File Upload
A drop zone or button for choosing files, and a list of the files chosen.
StatusFailedBranchmainDateLast 7 days
Filter Chip
An applied filter showing its field and value, with a remove button.
Form
A form that collects, validates and submits its fields.
Inline Edit
Text that turns into a field when clicked, for changing a value where it's shown.
Input
A text field.
Input Group
An input with icons, text or buttons attached.
Native Select
A styled native select element.
Number Field
A number input with stepper buttons, formatting and a draggable label.
Sent to ada@example.com.
OTP Field
A one-time code with a box for each character.
Password Field
A password input with a button that shows and hides what's typed.
Radio Group
A set of options where only one can be selected.
Secret key
Webhook secret
Secret Field
A read-only secret, such as an API key, hidden until shown, with buttons to copy and regenerate it.
Segmented Control
A row of mutually exclusive options with a sliding indicator, for switching views.
Select
Picks one value from a list in a popup.
60%
$20k – $75k
Slider
Selects a value or range by dragging.
Sortable
A list whose items people put in order by dragging them or with the keyboard.
Save changes every few seconds.
A summary every Monday.
Switch
A control that toggles between on and off.
2 tags: Design, Motion.
Tag Input
A text field that turns what's typed into a list of removable tags.
Textarea
A multi-line text field that grows with its content.
Time Picker
A time field people type into, with a list of times to pick from.
Toggle
A two-state button.
Was this helpful?
Toggle Group
A set of toggles that make up one setting, spaced apart or joined into one control.
Toolbar
A bar of buttons, toggles and menus that the arrow keys move between.
Display
16Cards, tables, badges and other ways to present content.
APSRPSJK
+4
AP
Ada Parkada@example.com
Avatar
An image with a fallback for representing a user.
Badge
A small label for status, counts or categories.
Card
A raised surface with a header, content and footer.
%22%2F%3E%3C%2Fsvg%3E)
%22%2F%3E%3C%2Fsvg%3E)
%22%2F%3E%3C%2Fsvg%3E)
%22%2F%3E%3C%2Fsvg%3E)
Carousel
A row of slides that scrolls and snaps one at a time.
save.tsx
Code Block
Multi-line code with a copy button and optional line numbers.
- Status
- Paid
- Customer
- APAda Park
- Amount
- $6,300.00
- Invoice
- INV-0042
Description List
Labeled values, such as the details of a record.
CPU
Memory
Gauge
A dial for a value within a known range.
Item
A row in a list, with optional media and actions.
⌘⇧⌥EnterEsc
⌘KCtrl+B
Press ⌘K to open the command menu.
Kbd
Shows a keyboard key or shortcut.
Northwind
Cobalt
Evergreen
Summit
Nimbus
Ember
Quanta
Crate
Marquee
A row of content that scrolls past on a loop.
Build minutes
Bandwidth
Requests
Meter
A bar showing a value within a known range, such as storage used.
Revenue
$48.2k
Uptime
99.98%
Last 30 daysMetric
A small label over a large figure.
Package Command
A command with a tab for each package manager, and a copy button.
DraftOperationalDegradedOutageIn review
200 OK429500
Status
A colored dot followed by a label.
Table
A table for rows of data.
- q3-board-update-final-v4-with-appendix.pdf2.4 MB
- homepage-hero-illustration-dark@2x.png860 KB
- brand-assets.zip48 MB
- customer-interview-transcripts-batch-2.docx312 KB
Truncate
A line of text that ends in an ellipsis when it doesn't fit, with the rest in a tooltip.
Charts
7Charts, graphs and other ways to present data.
Area Chart
Lines over shaded areas, for totals that change over time.
Bar Chart
Bars side by side or stacked, for comparing amounts across categories.
Chart
The config, axes, tooltip and legend every chart shares.
2,072 deploys
Heatmap
A heatmap of daily activity over the past year, one square per day.
Line Chart
Lines through points, for trends and rates over time.
Pie Chart
Sectors of a circle, for the parts of a whole.
APIOperational
30 days ago99.94% uptimeToday
WebhooksDegraded
30 days ago99.98% uptimeToday
Uptime
A strip of daily bars showing a service's status, day by day.
Feedback
7Alerts, toasts, progress, steps, and loading and empty states.
Storage almost full
You’ve used 9.2 of 10 GB.
Payment received
Alert
A callout for important information, with optional status colors.
No projects yet
Create one to start tracking tasks.
Empty
A placeholder for screens and lists with nothing to show.
Not started
Uploading files
Backup complete
Progress
Shows how far a task has progressed.
Skeleton
A shimmering placeholder shown while content loads.
Spinner
An indicator that something is loading.
- Install the app
Desktop or mobile
- Connect a workspace
Sign in to Acme
- Invite your team
Up to 10 people
Stepper
A numbered list of steps, stacked or in a row.
Changes saved
Your profile was updated.
Toast
Brief, temporary notifications.
Overlays
11Dialogs, menus, popovers and tooltips that open above the page.
Alert Dialog
A modal dialog that asks the user to confirm an action.
Command
A searchable menu of commands, with keyboard shortcuts.
Right-click here
Move to trash⌘⌫
Context Menu
A menu that opens on right click or long press.
Dialog
A window overlaid on the page.
Drawer
A panel that slides in from an edge and can be swiped away.
ada@example.com
Dropdown Menu
A menu of actions or options opened from a button.
Assigned to @adapark
AP
Ada Park
Product designer on the website redesign.
Hover Card
A preview card that appears when hovering a link.
Menubar
A row of menus, like a desktop app's menu bar.
Share “Mobile app”
Anyone with the link can view it.
Popover
Rich content in a floating panel anchored to a trigger.
Sheet
A floating panel that slides in from an edge of the screen.
Duplicate⌘D
Tooltip
A short label that appears on hover or focus.
Navigation
8Breadcrumbs, tabs, pagination and site menus for moving around an app.
Breadcrumb
Shows the path to the current page within a hierarchy.
APAda Park
SRSam Rivera
PSPriya Shah
Showing 3 of 18
Load More
A button that adds the next page to a list, in place, without the page jumping.
Navigation Menu
Site navigation links, with panels that open from the bar.
Outline
Links to the sections of a page, marking the one in view.
41–50 of 118
Pagination
Navigation between pages of results.
Side Nav
A grouped list of links that turns into a scrolling row on small screens.
Website redesign is 64% complete.
Tabs
Sections of content shown one at a time.
- src
- components
- button.tsx
- app.tsx
- main.tsx
- public
- favicon.svg
- package.json
Tree
A hierarchy of items that open and close, such as files and folders.
Layout
10Headers, dividers, collapsible regions and bars that respond to scrolling.
You’re billed monthly for each member.
Accordion
Vertically stacked headings that each reveal a section of content.
Aspect Ratio
Displays content within a fixed width-to-height ratio.
Ada Park starred 3 projects
website-redesign
mobile-app
brand-guidelines
Collapsible
A panel that expands and collapses.
Hide on Scroll
A bar that slides out of the way as you read down, and comes back when you scroll up.
Projects
Everything your team is working on.
Page Header
A page or section title with a description and actions.
Sidebar
Content
Console
Resizable
Panels that share a space, with handles between them to resize them.
Scroll Area
Native scrolling with a thin overlay scrollbar and edge fades.
jarvis-ui
Components built on Base UI and Tailwind CSS.
Released under the MIT license.
DocsComponentsGitHub
Separator
A line that separates content.
When a card needs 3-D Secure, the confirm step retries after the redirect while the webhook also finalizes the invoice, so we bill twice whenever the webhook wins the race. The fix makes finalizing idempotent.
Show More
Long content clamped to a few lines, with a button to show the rest.
Sticky Header
A header that stays at the top as you scroll, and gains an edge once content passes under it.
Miscellaneous
2Pieces that don’t fit the other groups.
We use cookies to understand how you use our service. Learn more
Consent
A cookie consent notice, as a card or a bar.
event.json
Press C to copy a value, or P to copy its path.JSON Viewer
A folding tree of JSON, with search and copyable values and paths.