@eduba/ui
all components

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
buttondetail →
button-groupdetail →
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 →
August 2026
date-pickerdetail →
dialogdetail →
alert-dialogdetail →
sheetdetail →
drawerdetail →
popoverdetail →
tooltipdetail →
hover-carddetail →
alertdetail →
toasterdetail →
progressdetail →
emptydetail →

no projects yet

Start by creating your first project — it'll appear here.

tabsdetail →

Overview content. Underline indicator slides between tabs.

accordiondetail →

paginationdetail →
context-menudetail →
right-click here
commanddetail →
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
data-tabledetail →
invoiceclientstatusamount
INV-014workloompaid$2,400
INV-013fieldnotepending$1,150
INV-012archive st.paid$3,200
INV-011hollow & cooverdue$860
INV-010marrowpaid$1,980
INV-009outpostpending$540
tabledetail →
recent invoices · q2
invoiceclientstatusamount
INV-014workloompaid$2,400
INV-013fieldnotepending$1,150
INV-012archive st.paid$3,200
INV-011hollow & cooverdue$860
resizabledetail →
left
right
scroll-areadetail →
item 01
item 02
item 03
item 04
item 05
item 06
item 07
item 08
item 09
item 10
item 11
item 12
item 13
item 14
item 15
item 16
item 17
item 18
item 19
item 20
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
formdetail →

We'll never share this.

multi-selectdetail →
tag-inputdetail →
brandeditorial
file-uploaddetail →
date-range-pickerdetail →
code-blockdetail →
dashboard.tsx
import { Button, Stat } from "@eduba/ui";

export function Dashboard({ themes }: { themes: string[] }) {
  return (
    <section className="grid gap-4">
      <Stat label="themes" value={themes.length} />
      <Button onClick={() => console.log("ship it")}>
        Deploy
      </Button>
    </section>
  );
}
install
pnpm add @eduba/ui
statdetail →
components
66+8

this release

bundle
0deps

tree-shaken

themes
2

paper · wine

a11y score
100+4
description-listdetail →
stack
radix · tailwind v4
type
diatype · plex mono
themes
paper · wine
license
mit
stepperdetail →
briefscope & goals
designexplore
3buildship it
ratingdetail →
chipdetail →
brandingwebproducteditorialmotion
tree-viewdetail →
avatar-groupdetail →
JDEBARMK+2
timelinedetail →
  1. jun 2026

    v0.1 — public docs

    66 components, two themes, live on Vercel.

  2. may 2026

    motion primitives

    Scramble, SplitText, Reveal — the brand layer.

  3. apr 2026

    foundations

    Tokens, type scale, and the Radix base.