modest-ui

A minimal, themeable CSS component library. Black and white by default, easy to customise.

Example

Here's what a page built with modest-ui looks like:

Build something great

A platform for creators who value simplicity. No clutter, no distractions — just the tools you need.

Create an account

Minimal

No unnecessary styles. Just the essentials to get you started.

Themeable

Customise everything with CSS variables. Make it yours.

Native

Built on native HTML elements. No JavaScript required.

Installation

Via CDN:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/thisismodest/modest-ui@0.1.0/dist/modest-ui.css" />

Or with a package manager:

npm install github:thisismodest/modest-ui

Then import in CSS:

@import "modest-ui/dist/modest-ui.css";

Or cherry-pick components:

/* Always include tokens first */
@import "modest-ui/base/tokens.css";

/* Then pick what you need */
@import "modest-ui/components/button/button.css";
@import "modest-ui/components/input/input.css";

Usage

Add the appropriate class to your HTML elements:

<button class="mdst-button">Default</button>
<button class="mdst-button mdst-button--solid">Solid</button>
<input type="text" class="mdst-input" placeholder="Enter text" />

Theming

Override CSS custom properties to theme:

:root {
  --mdst-color-fg: #000;
  --mdst-color-bg: #fff;
  --mdst-color-border: #000;
  --mdst-color-muted: #666;
  --mdst-color-subtle: #f5f5f5;
  --mdst-color-focus: #000;
  --mdst-radius: 0;
}

Browse the components in the sidebar to see examples.