browse the library
Every component and motion primitive in @eduba/ui, in one scroll. Click detail → for the per-component page.
typographydetail →
heading one
heading two
heading three
heading four
A lead paragraph for introducing a section with a slightly larger size and muted tone.
Body paragraph. Diatype regular at 15px / 1.6 line-height — the default reading style across eduba surfaces.
Muted secondary text for less important context or metadata.
SECTION LABEL · MONOSmall caption text.You can embed inline code right inside paragraphs.
001services
labeldetail →
fielddetail →
We'll never share this.
separatordetail →
Solid divider
Dashed divider
skeletondetail →
spinnerdetail →
Loading
Loading
Loading
kbddetail →
⌘shiftk
badgedetail →
defaultsolidsecondaryoutlinemutedsuccesswarningdestructive
avatardetail →
JDEB04
inputdetail →
input-groupdetail →
https://
/path
input-otpdetail →
textareadetail →
checkboxdetail →
radio-groupdetail →
switchdetail →
sliderdetail →
selectdetail →
native-selectdetail →
toggledetail →
toggle-groupdetail →
comboboxdetail →
calendardetail →
June 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
date-pickerdetail →
dialogdetail →
alert-dialogdetail →
sheetdetail →
drawerdetail →
popoverdetail →
tooltipdetail →
hover-carddetail →
alertdetail →
heads up
Default alert with editorial tone and an optional icon.
saved
All changes synced to the workspace.
error
Something went wrong — the server could not be reached.
toasterdetail →
progressdetail →
emptydetail →
no projects yet
Start by creating your first project — it'll appear here.
tabsdetail →
accordiondetail →
paginationdetail →
commanddetail →
no results.
new project ⌘N
open settings ⌘,
switch theme ⌘T
export layout soon
collapsibledetail →
starred projects · 3
workloom
carddetail →
proj · 014
workloom redesign
Brand, site, and product — one tight engagement.
phasebuild
timeline6 weeks
team3 people
itemdetail →
projects
Six engagements in flight across the studio.
01
components
Everything in @eduba/ui, themed and documented.
02
design tokens
Color, type, spacing, and motion as variables.
03
aspect-ratiodetail →
16 / 9
carouseldetail →
1
2
3
4
data-tabledetail →
| invoice | client | status | amount |
|---|---|---|---|
| INV-014 | workloom | paid | $2,400 |
| INV-013 | fieldnote | pending | $1,150 |
| INV-012 | archive st. | paid | $3,200 |
| INV-011 | hollow & co | overdue | $860 |
| INV-010 | marrow | paid | $1,980 |
| INV-009 | outpost | pending | $540 |
tabledetail →
| invoice | client | status | amount |
|---|---|---|---|
| INV-014 | workloom | paid | $2,400 |
| INV-013 | fieldnote | pending | $1,150 |
| INV-012 | archive st. | paid | $3,200 |
| INV-011 | hollow & co | overdue | $860 |
resizabledetail →
scroll-areadetail →
chartdetail →
directiondetail →
film-graindetail →
FilmGrain is the canvas overlay on this entire page — look closely.
scramble-textdetail →
HOVER TO SCRAMBLE
split-textdetail →
number-tickerdetail →
0
underline-drawdetail →
hover the underline
revealdetail →
I fade up into view when scrolled to.
staggerdetail →
one
two
three
four
magneticdetail →
hover-parallaxdetail →
tilt me
dashed-framedetail →
dashed perimeter
marqueedetail →
DIATYPEIBM PLEX MONORADIXTAILWIND v4GSAPVAULSONNER
hold-to-confirmdetail →
image-revealdetail →
clip-path reveal