Materin UI v0.8.0

Overview

Materin's work lives in several places: Obsidian plugins, the organization site, and a Vue 3 component library. If each kept its own styles, changing one colour would mean editing four repositories. Materin UI collects that in one place — tokens decide values, the contract decides names — and the plugins and the site only consume it.

Four pieces

• Token sheet (tokens/materin-ui.css) — the single file to edit when the look changes. Host first, brand second: if the host theme (Obsidian's --interactive-accent, --background-primary, --radius-s …) defines the variable it wins, otherwise the brand fallback applies. Change the theme and the interface follows;
• Naming contract — materin-<scope>-<component>[__part][--variant]. One name per component, no aliases, so both people and tools can locate a component and its styles by name;
• Vue 3 component library (@materin-tech/materin-ui) — four components, every one of them referencing tokens only, with no hard-coded colours;
• Checker (tools/check-components.py) — verifies that names, registry, styles and tokens agree: class names not in the registry, references to tokens that do not exist, colours written past the tokens. The contract is enforced by a script, not by good intentions.

Components (93 today)

• Nine layout pieces — Container / Header / Aside / Main / Footer (the container turns horizontal as soon as an aside appears), Row / Col (24-column grid with span / offset / order and xs–xl breakpoints), Space, Divider (horizontal or vertical, three line styles, text position);
• Eight foundation and display pieces — Link (seven semantic colours), Text (semantic colours, three sizes, single- and multi-line truncation), Title (levels 1–6), Badge (numbers, status dot, 99+ over the max), Avatar (image, text or default silhouette; circle or square), Skeleton and SkeletonItem (sweeping placeholders), Empty;
• A final batch of 38 (completing v0.8.0) — tree, table, calendar, QR code, tamper-proof watermark, infinite scroll and tree select; menu, tabs, breadcrumb, steps, dropdown, anchor, back-to-top, affix and page header; date, time, upload, transfer, cascader, colour, autocomplete, mention and a command message box; plus splitter, button group, scrollbar, carousel, config provider, icons, and five pieces unique to this series: copy, HTTP method badge, status dot, glass panel and page shell;
• Eleven data display pieces — Progress (line or ring, indeterminate), Statistic (grouping, prefix and suffix), Descriptions, Result, Collapse (multiple or accordion), Timeline (the last node drops its line automatically), Pagination (ellipsis pagers, works controlled), Segmented, and Image (loading shimmer, error fallback, lazy loading);
• Ten feedback and overlay pieces — Alert, Loading (local or fullscreen mask), Tooltip / Popover / Popconfirm (one popper mechanism: four placements, closes on outside click), Dialog (overlay, centred, fullscreen or glass, closes on Escape, locks scrolling), Drawer (slides in from any side), MiMessage and MiNotification (one-line global messages and notices) and Tour (step-by-step highlighting);
• Thirteen form and choice pieces — Form / FormItem (a small self-contained validator: required, type, length, range, pattern, custom, triggered on blur or change, with validate / validateField / resetFields / clearValidate), InputNumber, Select + Option + OptionGroup (single or multiple, keyboard navigation, closes on outside click, grouped options), Checkbox and CheckboxGroup, Radio and RadioGroup, Switch, Slider (including a two-handle range) and Rate;
• Four display pieces — Input (materin-ui-field, which inherits size, disabled and error state from its form item), Button, Tag, Card (default / glass / hero, falling back to an opaque surface without backdrop-filter);
• The roadmap is complete: all 97 items — full Element Plus coverage (92) plus the five this series needs; — the target is full Element Plus coverage (92 items) plus five components this series needs: a copy button, an HTTP method badge, a status dot, a glass panel and a page shell. The list lives in registry/roadmap.json, done and pending both marked.

Install and use

npm install @materin-tech/materin-ui

import { createApp } from 'vue'
import MaterinUI from '@materin-tech/materin-ui'
import '@materin-tech/materin-ui/styles'   // component styles
import '@materin-tech/materin-ui/tokens'   // token sheet

createApp(App).use(MaterinUI).mount('#app')

Where there is no Vue — the Obsidian plugins, for instance — take the token sheet alone:

<link rel="stylesheet" href="https://materin-tech.github.io/materin-ui/tokens/materin-ui.css">

Scopes in the contract

The second segment says where a name belongs; there are six: ui (shared components), site (the organization site), docs (the docs site), and office / view / ctx (the three plugins). States are is-* or ARIA attributes; layout utilities use materin-u-*.

Docs and local development

Component demos, live token values and installation are on the docs and style showcase site. In the repository:

npm install
npm run docs:dev      # docs dev server
npm run build         # build the library + type declarations
npm run docs:build    # build the docs site into docs-dist/
python3 tools/check-components.py --repo .   # naming contract check

The docs site is built in CI, and the contract check gates the release: if names, registry, styles and tokens disagree, nothing is published.

License

MIT.

Source

This page is based on the README, CHANGELOG and roadmap of materin-tech/materin-ui (version 0.8.0). The source repository is authoritative.