The editorial component library
for React & Tailwind v4.
47 typed components for portfolios, documentation, and editorial products. The package ships ESM subpath exports and a Tailwind CSS v4 theme built from semantic OKLCH tokens.
Component preview
65% completed · $273,000 achieved
"Design tokens should live in CSS, not locked in build configurations."
EDITORIAL · LAYOUT
OKLCHMonospace Editorial System
Typed React components styled through shared semantic tokens for light and dark themes.
$ npm i @chitrank2050/monoline-ui
✓ Package and TypeScript declarations installed
Package exports with examples, props, tokens, and usage guidance.
Try the components in context.These examples use the same package exports documented in the component reference.
Supports asChild, icon slots, and token-backed active states.
WAI-ARIA switch semantics with hairline border alignment.
Roving keyboard navigation with spring-inspired pill physics.
Compact typography and trend indicators for dashboards & portfolios.
Stable indicator dot with subtle pulse animation and tone variants.
Editorial notes, warnings, and tips with a one-pixel leading border.
Import the theme once. Override semantic tokens when needed.Components read shared color, type, spacing, radius, and motion variables from the package stylesheet.
Import the package theme once. It registers the compiled component sources and exposes the semantic CSS variables.
@import "tailwindcss";
@import "@chitrank2050/monoline-ui/theme.css";
/* Add data-theme="light" or "dark" to the root html element. */MIT licensed · React 18.2 and 19
Start with one component.
Install the package in a supported React project, import the theme, then choose components through their direct subpath exports.