Gallery

Components.

Every primitive used across Lumino surfaces, rendered live from tokens. Hover, click, type — they're real. Copy the class or the JSX from any example.

Button

Primary for the one best action, secondary for neutral, ghost for in-line, danger for destructive. Three sizes. Supports disabled state.

Icon button

Square action button with a single icon. Always pair with aria-label.

Input

Labelled text input. Focus shows the accent ring. Label uses mono caps as a tertiary hint.

Textarea

Select

Switch

For binary state that takes effect immediately.

Checkbox

Radio

Slider

Card

A neutral container. Use --color-surface-panel on a darker page; --color-surface-elevated on a panel.

Neural networks · Ch. 3
Backprop from first principles. 42 min · 8 lessons.
Signals & Systems
Fourier, convolution, filters. Starts Monday.

Badge

Default New Live Pending Error

Avatar

AL KM AL KM RN +4

Progress

Keyboard keys

K  open search /  show shortcuts Esc  close

Toast

Transient confirmation. Use the LuminoChrome.showToast() helper.

Saved — Chapter 3 draft
Theme applied · Studio
Offline — changes not synced

Tooltip

Pro tip: ⌘K for search

Tabs

Overview panel — an at-a-glance view of enrollment, progress, and upcoming milestones.

Accordion

What is Lumino?

A learning platform + design system. The platform serves students, teachers, and parents; the system powers every surface it touches.

Can I use it with Tailwind?

Yes — a Tailwind preset exposes tokens as utilities.

How do I report an issue?

Email hello@lumino.design or file one on the Changelog page.

Table

StudentTrackProgressLast seen
Ada LovelaceNeural Networks
2h agoLive
Ken ThompsonSystems · C
yesterdayAway
Grace HopperCompilers
3m agoMentor