Get Started
Introduction
Components
Accordion
Badge
Button
Card
Checkbox
Command
Dialog
Dropdown Menu
Input
Select
Switch
Table
Tabs
Toast
Tooltip
Forms
Introduction
Validation
Field Arrays
100%

Input

Light
Dark
System
May 2026
SuMoTuWeThFrSa
May 2026
SuMoTuWeThFrSa
React
Vue
Svelte

Display

Emily Chen

Product Designer

DefaultSecondaryDestructiveOutline
AB
NameRoleStatus
AliceAdminActive
BobEditorDraft
Section A
Section B
16:9
Add testsMed
Fix login bugHigh
Update docsLow
1
2
3

Feedback

Are you sure?

This action cannot be undone.

Navigation

Name, email, and avatar settings.
Change your password here.
Right-click here
Home
About
Settings

Layout

Yes. WAI-ARIA compliant.

Yes. Default styles included.
Item A
Item B
Item C

Dimensions

Set the dimensions for the layer.

@barefootjs

JSX → Marked Template + client JS compiler.

Tags
v1.0.0
v1.1.0
v1.2.0
v1.3.0
v1.4.0
v2.0.0
A
B
Utility — auto-installed by overlay components
barefoot init --from "https://ui.barefootjs.dev/studio?c=..."