Beaket UI

A tactile, copy-paste UI system for thoughtful web interfaces. 29 React components, five themes. The CLI copies the source into your project; after that you own it.

$ npx @beaket/ui initRead the manual →

Form

Everything a person types, picks, or toggles.

10
Button
Input
Textarea
Select
Checkbox
Horizontal
Vertical
Disabled
Radio
Switch
Slider
Label

Used only for account notifications.

Field

Feedback

What the interface says back.

6
Alert
DefaultSecondary Success Error InfoOutline WarningSPEC-001
Badge
Progress
Skeleton
Tooltip
NavigationProgress

Moving between places, and knowing where you are.

5
Navigation
Breadcrumb

Account Settings

Manage your account settings and preferences.

Tabs
Pagination
DropdownMenu

Surface

The sheets that content sits on.

4

acme-web

Marketing site and docs, deployed on the edge.

Card

Section Title

Section description text.

Another Section

More content here.

Separator
Simplicity is the ultimate sophistication when every detail serves a purpose and nothing distracts from what truly matters.
Blockquote
BKJDAB+3
Avatar

Data

Rows, columns, and the controls over them.

2
InvoiceStatusMethodAmount
INV001PaidCredit Card¥25,000
INV002PendingPayPal¥15,000
INV003UnpaidBank Transfer¥35,000
Table
Name
Email
Role
Status
Alice Johnsonalice@example.comAdmin active
Bob Smithbob@example.comEditor active
Carol Whitecarol@example.comViewer inactive
David Browndavid@example.comEditor pending
Eve Daviseve@example.comAdmin active
Showing 1 to 5 of 10 results
DataTable

Overlay

Layers that float above the page.

2
Dialog
Sheet