Marvia

Sign inSign up

packages/ui

46 registered components

One design system for the entire product. Every surface — core page, report, extension or marketplace listing — composes from these layers. A page that hand-builds a layout is a defect.

Tokens

Color, spacing, radius, shadow, type. The only source of visual truth.

Primitives

shadcn/ui, exported once. Nothing forks a second Button.

Compound

Headers, metrics, states, dialogs — built from primitives only.

Blocks

Page-level compositions: hero, panels, timeline, prompt, content.

Layouts

App shell, dashboard, report, documentation, split, blank.

registry

Component registry

Schema-driven surfaces resolve components by id, never by import path. Registering an entry is how an extension gets a renderable component without touching the bundle graph.

primitives

button

Action trigger

@/components/ui/button

input

Text field

@/components/ui/input

textarea

Multiline field

@/components/ui/textarea

select

Option picker

@/components/ui/select

checkbox

Boolean field

@/components/ui/checkbox

switch

Toggle field

@/components/ui/switch

badge

Status label

@/components/ui/badge

card

Surface container

@/components/ui/card

dialog

Modal surface

@/components/ui/dialog

tabs

Section switcher

@/components/ui/tabs

table

Tabular data

@/components/ui/table

progress

Determinate progress

@/components/ui/progress

separator

Visual divider

@/components/ui/separator

skeleton

Loading placeholder

@/components/ui/skeleton

tooltip

Contextual hint

@/components/ui/tooltip

command

Command palette

@/components/ui/command

compound

page-header

Page title, kicker and actions

@marvia/ui/compound/page-header

section-header

Section title row

@marvia/ui/compound/section-header

blocks

hero

Landing headline block

@marvia/ui/blocks/hero

feature-grid

Feature card grid

@marvia/ui/blocks/feature-grid

data-panel

Titled data surface

@marvia/ui/blocks/data-panel

layouts

app-layout

Sidebar → header → toolbar → content → prompt

@marvia/ui/layouts/app-layout

dashboard-layout

Header plus content stack

@marvia/ui/layouts/dashboard-layout

split-layout

Two-column split

@marvia/ui/layouts/split-layout

charts

chart-container

Chart framing wrapper

@marvia/ui/charts/chart-container

sparkline

Mini trend line

@marvia/ui/charts/sparkline

progress-ring

Circular score

@marvia/ui/charts/progress-ring

forms

field

Label, hint, error and ARIA wiring

@marvia/ui/forms/field

form-shell

One form engine

@marvia/ui/forms/form-shell

navigation

search-box

Inline search field

@marvia/ui/compound/search-box

toolbar

Page action bar

@marvia/ui/compound/toolbar

theme-switcher

Light / dark / system

@marvia/ui/compound/theme-switcher

dialogs

confirmation-dialog

Confirm, delete, publish, pay

@marvia/ui/compound/confirmation-dialog

feedback

empty-state

Guidance instead of emptiness

@marvia/ui/compound/empty-state

loading-state

Skeletons, never spinners

@marvia/ui/compound/loading-state

error-state

Recoverable failure surface

@marvia/ui/compound/error-state

feedback

Inline and banner messages

@marvia/ui/compound/feedback

content

activity-timeline

Chronological activity

@marvia/ui/blocks/activity-timeline

prompt-input

Persistent AI prompt

@marvia/ui/blocks/prompt-input

markdown-content

The single content renderer

@marvia/ui/blocks/markdown-content

documentation-layout

Table of contents plus reading column

@marvia/ui/layouts/documentation-layout

reports

metric-card

Report metric tile

@marvia/ui/compound/metric-card

stat-grid

Grid of metric tiles

@marvia/ui/compound/stat-grid

issue-card

Severity-tagged finding

@marvia/ui/compound/issue-card

recommendation-card

Improvement suggestion

@marvia/ui/compound/recommendation-card

report-layout

Fixed report section order

@marvia/ui/layouts/report-layout

typography & motion

Scales, roles and motion

Type is a fixed scale with named roles; motion is a fixed set of presets. Neither is extended per page.

Font scale

  • 0xs
  • 1sm
  • 2base
  • 3lg
  • 4xl
  • 52xl
  • 63xl
  • 74xl
  • 85xl

Text roles

displayheadingsubheadingbodylabelcaptioncodemono

Motion presets

fadehoverpressscalesliderisefocus

fixed structures

Report layout

The report order is part of the design system, not of any extension. Extensions supply data for these sections and nothing else.

1. Overview2. Metrics3. Visual Cards4. Issues5. Recommendations6. Actions7. History