Documentation
Introduction
Monoline UI is a React component library for portfolios, documentation, and editorial product interfaces. It combines typed package exports with a Tailwind CSS v4 theme built from semantic CSS variables.
What the package provides
Components, styles, and TypeScript declarations ship together. The documentation site uses the published component API in its examples.
React components
The package exposes 47 typed components for navigation, forms, overlays, content, feedback, and page structure.
Theme stylesheet
One CSS import provides Tailwind CSS v4 source registration, semantic variables, component styles, and light and dark themes.
Direct subpath exports
Each component has a direct package entry, so application code can import only the component it uses.
Explicit client boundaries
Static components can stay in a React Server Component. Interactive entries declare their own client boundary.
How imports work
Use a component's direct subpath in application code. Static entries do not add a Monoline client boundary; components that own browser state or overlay behavior are client entries.
import { Card } from "@chitrank2050/monoline-ui/card"
import { Popover } from "@chitrank2050/monoline-ui/popover"How styling works
Import @chitrank2050/monoline-ui/theme.css once in your root stylesheet. Components then read semantic color, type, spacing, radius, and motion variables from the active theme.
Choose your next step
Install the package first, browse the component API, or review the theme tokens before adapting the visual system.