Skip to content

v1.0

v1.0Latest nextPreview of 1.1

Docs Components Blocks Examples Themes

Accent

Open the theme customizer →

Plinth

Docs
Components
Blocks
Examples
Themes

Examples

Built with Plinth

Full screens composed only from the library's components and tokens. Switch the accent or radius in the top bar and watch them follow.

All
Dashboard
Mail
Tasks
Settings
Authentication
Pricing
Onboarding

Accounts

Labels

Storage6.4 of 15 GB

Inbox9

9 conversations

ArchiveE

Report spam

Delete#

Snooze until tomorrow

Unstar

Quillmark rebrand: round two of the logo

Clients2 messages

Hi Ada,
We went through the second round with the founders and have a clear favourite: option B, the one with the open counter on the Q.
A few small notes on the wordmark spacing (attached). Could you also try the mark at 16px for the favicon? We want to be sure it still reads at that size.
Thanks for turning this around so quickly. The whole team is excited.
Kenji

Reply to Kenji Watanabe

Attach file

⌘Command↵Enter to send

Mailboxes

ada@fernhill.example

Accounts

Labels

Storage6.4 of 15 GB

New message

From ada@fernhill.example

To*

SubjectOptional

Message

Plinth

A themeable component library and design system.

v1.0 · 36 components

Docs

Introduction
Installation
Theming
Design tokens

Library

Components
Blocks
Examples
Themes

Examples

Dashboard
Mail
Tasks
Settings

© 2026 MONOFRAME. People and companies in the examples are fictional.Plinth · a MONOFRAME company

Suggested

IntroductionGetting started
InstallationGetting started
ThemingGetting started
Design tokensGetting started
All componentsGetting started
ButtonInputs · Actions in five variants and three sizes, with icons and loading state.
InputInputs · Single-line text field with prefix, suffix and validation states.
TextareaInputs · Multi-line text with auto-grow and a character counter.
SelectInputs · Native select styled to match, with groups and placeholder.
CheckboxInputs · Checked, unchecked and indeterminate, with labels and descriptions.
Radio groupInputs · One choice from a list, as rows or as cards.
SwitchInputs · On/off toggle for settings that apply immediately.
SliderInputs · Pick a value or a range on a track.
Segmented controlInputs · A compact set of mutually exclusive options.
ComboboxInputs · Searchable select with keyboard navigation.
Date pickerInputs · Calendar month view with single date and range selection.
File uploadInputs · Drop zone with file list and upload progress.
DialogOverlays & navigation · Modal dialog for focused tasks and confirmations.
SheetOverlays & navigation · Panel that slides in from an edge of the screen.
PopoverOverlays & navigation · Floating panel anchored to a trigger.
TooltipOverlays & navigation · Short label on hover and focus.
Dropdown menuOverlays & navigation · Menu of actions with icons, shortcuts and sections.
CommandOverlays & navigation · ⌘K command palette with groups and search.
ToastOverlays & navigation · Brief notifications that stack in a corner.
TabsOverlays & navigation · Switch between views, as underline or pill tabs.
AccordionOverlays & navigation · Expandable sections built on native details.
BreadcrumbOverlays & navigation · Where a page sits in the hierarchy.
PaginationOverlays & navigation · Move between pages of results.
StepperOverlays & navigation · Progress through a multi-step flow.
AvatarData display · Initials or image, with status and stacked groups.
BadgeData display · Small status and category labels.
CardData display · Container with header, body and footer.
AlertData display · Inline messages for info, success, warning and errors.
ProgressData display · Linear and circular progress indicators.
SkeletonData display · Placeholders while content loads.
TableData display · Simple, readable tables for structured data.
Data tableData display · Sorting, filtering, selection and pagination.
Empty stateData display · What to show when there's nothing yet.
KbdData display · Keyboard keys and shortcuts.
StatData display · Key numbers with trend and sparkline.
ChartData display · Line, bar and donut charts with no dependency.
BlocksLibrary · Heroes, pricing, stats, auth, tables and more.
ExamplesLibrary · Full app screens built from the components.
Dashboard exampleExamples
Mail exampleExamples
Tasks exampleExamples
Settings exampleExamples
Authentication exampleExamples
Pricing exampleExamples
Onboarding exampleExamples
Theme customizerLibrary · Pick an accent, a radius and a mode; copy the CSS.
Accent colorsTheming
RadiusTheming
Dark modeTheming

No results for “”. Try a broader word, or browse the docs.

to open↑ ↓ to moveEsc to closeAll components