Try it at ink-ui.com.

Ink UI is a React component library built on Base UI primitives and styled with Tailwind CSS v4. It started as the internal component library of flowingto, and was later extracted and open sourced.

The design is organized around warmth and friendliness: warm grays and orange as the primary colors, with generous corner radii. The goal is an interface that feels more personal and approachable, which makes it a better fit for consumer products than for dense, data-heavy admin panels or dashboards.

Color

Ink UI does not use Tailwind's default stone palette. The gray is adjusted by hand so that it is only slightly warmer than a neutral gray, close to the feeling of paper. The primary orange and the secondary red are also handpicked, and are less saturated than Tailwind's colors of the same name. Every color is expanded into a scale in OKLCH space to keep the visual result consistent.

shadcn/ui expresses component states mainly by layering transparency over a base color, for example hover:bg-primary/90. That approach has two limits: the resulting color can only move in one direction, so hover cannot darken in light mode and lighten in dark mode; and hover and active cannot be given separate semantic colors. On top of the shadcn/ui theme, Ink UI adds dedicated tokens for the different states of a surface color. Each state can then be controlled precisely, which covers most of the interaction cases in a design system.

Each state is derived from its base color by mixing toward --foreground with color-mix, so the same formula darkens hover in light mode and lightens it in dark mode. Switching the theme shows the difference. secondary is the exception: it is a translucent tint composited over the background, so its hover and active states raise the alpha instead.

Motion and Details

Motion favors smooth, natural transitions. Micro-interactions stay restrained: they add polish without pulling attention away from the content. For example:

• the transition when a button enters its loading state
• text alignment in a menu when only one item has an icon
• menu and select triggers keeping their hover state while the panel is open
• spacing kept above and to the right of the scroll bar