v1.0
Introduction
Components
{{ item.label }} Layouts Accessibility
Theme
{{ p.label }}
Blend
Radius {{ radius.control }}px
Spacing {{ spacingLabel }}
Component Library

bysur UI Kit

Built on Spartan UI (vega style) foundations, restyled to bysur tokens: Bricolage Grotesque headings, Inter everywhere else, a flat Notion-inspired surface, and the Studio blue palette. Every control below is live: click, type, toggle, including the theme switch in the topbar.

Accordion

Click a row to expand its content. Single- or multi-open, your choice; this one allows multiple open at once.

{{ item.title }}

{{ item.content }}

Alert & Toast

Inline banners, plus toasts you can trigger.

Avatar

Sizes and a stacked group.

RK
RK
RK
JS
PN
SC
+4

Badge & Tag

Status badges and removable tags.

Live In review Blocked Draft Archived
Design Engineering Q3 roadmap

Buttons

Primary, secondary, ghost and destructive variants across three sizes, plus disabled and icon states.

Icon
Disabled
Feature buttons

Card

Spartan (vega style) card anatomy — header with title, description and an action slot; content; footer — rebuilt with ByUI tokens.

Login card
Login to your account Enter your email below to login to your account

Checkbox & Radio

Click to toggle.

Checkboxes
{{ item.label }}
Radio group
{{ item.label }}

Inputs

Text field, textarea, error and disabled states.

Shown in the sidebar and browser tab.
Contact an admin to change this.
Enter a valid email address.

Password

Text field with a visibility toggle.

Must be at least 8 characters.

Pill Selector

Segmented single-choice control, same mechanic as the Theme blend switch, generalized to any number of items.

Slider

Drag the thumb or click the track.

Value {{ demoSliderValue }}

Select

Notion-style custom dropdown; click to open.

{{ opt.label }}

Table

Dense data table with row hover.

Page Owner Status Updated
{{ row.name }} {{ row.owner }} {{ row.status }} {{ row.updated }}

Tabs

Click a tab to switch panels.

{{ tab.label }}

High-level summary of this page: last edited by Jordan Silva, 3 collaborators, linked from 2 other workspaces.

Jordan added a comment · Priya updated the status to "In review" · Sam mentioned you in a note.

Visibility: Workspace · Comments: Enabled · Page analytics: Off.

Toggle

Switches for settings rows.

{{ item.label }}

Tooltip

Hover a toolbar icon.

{{ tip.trigger }}
{{ tip.label }}

Layouts

Full-page compositions built from the components above. Content is blocked out with placeholders; swap the layout via the pill selector above.

Accessibility

{{ kpi.label }}
{{ kpi.score }} /100
{{ kpi.badgeLabel }}

Text contrast

Computed live against the current theme, radius and product accent: foreground vs. background luminance ratio (WCAG 2.1 §1.4.3 / RGAA 3.2).

Element Ratio Required Result
{{ row.label }} {{ row.swatch }}
{{ row.ratioLabel }} {{ row.required }} {{ row.badgeLabel }}

Button accessibility & hit targets

Target size measured against WCAG 2.5.8 (24px minimum, AA) and 2.5.5 (44px, AAA).

Button Height Text contrast Target size Focus ring
{{ row.label }} {{ row.height }}px {{ row.ratioLabel }} {{ row.sizeBadgeLabel }} Visible
ESC
{{ group.label }}
{{ item.avatarText }}
{{ item.title }} {{ item.subtitle }}
No results for "{{ searchQuery }}"
ESC
{{ item.label }}
No components match "{{ gSearchQuery }}"

Delete this page?

This moves "Product launch plan" to trash. Pages in trash are deleted permanently after 30 days.

{{ toast.message }}
{{ toast.description }}