apparat/ui

Why it's ranked here

The niche is real and poorly served: general UI kits stop at buttons and forms, while an image or motion tool needs angle dials, levels histograms, easing editors and box-model inputs. This kit ships those under the MIT license with a short dependency list: React 19, Framer Motion, Lucide and two class-name helpers. The limits are just as concrete. The package is marked private and unversioned, the manifest has no test script or test runner, and the larger panels behave like demos more than building blocks. A strong head start for the fiddly controls, not a maintained dependency.

What's good

The small controls are written with care. The color field accepts three- or six-digit hex with or without the leading hash, expands shorthand, uppercases the result, and reverts on bad input or Escape. Controls follow the controlled pattern, value in and change handler out, so they drop into existing state without adapters. Every color resolves through theme variables, so re-skinning means editing one stylesheet rather than hunting hard-coded values. Copying source instead of installing a package means you own the code and can cut what you do not need.

Tradeoffs

The composite panels hold their own state. The layer list takes starting layers and a starting selection but reports nothing back: no callback fires when a layer is hidden, locked or selected, so wiring it to a real document means rewriting it. The canvas editor template takes no props at all and forces a 760-pixel minimum width. Accessibility is thin in places: the color swatch is a clickable div with the native picker removed from the tab order, layer visibility and lock buttons appear only on hover, and much of the label text is 8 or 9 pixels. There is no automated test setup.

How to use it well

Best for a React and Tailwind project that needs a property inspector and wants the fiddly inputs done already: dials, ruler sliders, color and gradient fields. Copy the individual controls and keep state in your own store. Treat the panels and full editor layouts as reference designs to rebuild, adding change callbacks and keyboard access as you go. You will need the Space Mono font and the CSS color variables in place. It does not provide a canvas renderer, hit testing, undo or a document model, so pair it with something that does.

Observed

License

MIT

Language

TypeScript, React 19 components

Packaging

Package marked private; not installable from npm. Components are copied as source from the demo site's code viewer.

Interface

React component library only; no CLI, API or MCP server

Styling

Tailwind CSS 3 with CSS-variable color tokens and class-based dark mode

Runtime dependencies

framer-motion, lucide-react, clsx, tailwind-merge

Build tooling

Vite with TypeScript project build and Oxlint

Tests

No test script and no test runner in the manifest