Leopoldo UI

Living styleguide

Every item served by the @leopoldo registry, rendered from the same source the registry ships. Switch the theme to check both modes.

Primitives

22 items
@leopoldo/button6 variants, 9 sizes
@leopoldo/badge
DefaultSecondaryOutlineDestructiveGhost
@leopoldo/card
Mandate 04 / Zurich
Sell side, industrials, signed 12 August.

Card, header, title, description, content and footer.

@leopoldo/input + label
@leopoldo/textarea
@leopoldo/checkbox
@leopoldo/select
@leopoldo/separator
AboveBelow
@leopoldo/skeleton
@leopoldo/dialog
@leopoldo/alert-dialog
@leopoldo/sheet
@leopoldo/dropdown-menu
@leopoldo/tooltip
@leopoldo/hover-card
@leopoldo/tabs
Default variant.
@leopoldo/table
ClientPlanStatus
ChiavariTeamactive
Key PartnersSolosyncing
@leopoldo/avatar
LAMB
+3
@leopoldo/scroll-area
@leopoldo/sonner
@leopoldo/chart

Blocks

9 items
@leopoldo/page-header

Clients

Registry

Eyebrow, display title, description and an actions slot.

@leopoldo/kpi-card

Active clients

38

+4 this month

Stale installs

5

no update check in 30d

Downloads

1.2k

@leopoldo/empty-state

No mandates yet

Open a mandate to start the pipeline.

@leopoldo/confirm-dialog
@leopoldo/health-signal
@leopoldo/status-badge
pendingauthorizedsyncingactiveerrorrevoked
@leopoldo/timeline-entry

Registered

3h ago

Downloaded update v1.22.0

1d ago

Checked for updates

5d ago

@leopoldo/file-upload
@leopoldo/app-sidebardesktop rail plus mobile sheet

The rail collapses. The button opens the same navigation in a sheet.

Hooks

3 items
@leopoldo/use-reduced-motion
falseprefers-reduced-motion
@leopoldo/use-page-visibility
visibleswitch tab to see it flip
@leopoldo/use-document-title
This page sets its own document title while mounted. Look at the browser tab.

Library

3 items
@leopoldo/utilscn
cn("p-2", condition && "p-4") => "p-4"
@leopoldo/theme-providernext-themes
Mounted around this page. The toggle above drives it.
@leopoldo/http
createHttpClient({ baseUrl, auth: { type: "bearer", token } }).get("/clients")