Qure UI

Introduction

Qure-styled React components you copy into your project and own.

Qure UI is a set of components you copy into your repository, where you can read them, change them, and keep the change. Same distribution model as shadcn/ui: a registry, a CLI, and code that lives in your project rather than in node_modules.

How it is put together

Three layers, and the split is the whole idea.

Behaviour

Base UI primitives — focus management, keyboard interaction, ARIA, RTL. Maintained by the team that wrote Radix, not by us.

Structure

A ~40 line component per file: the primitive plus a map from variant names to class names. No styling.

Look

One stylesheet, style-qure.css, expressing the Qure design against the Figma token export.

To reskin the library you edit one file. To take an upstream improvement you replace one .tsx. They never collide, which is why they are separate.

Why it was rebuilt

The previous library was materialised from Figma and looked right, but 3 of its 112 component files contained a single role, aria-*, tabIndex or onKeyDown. Its checkbox was a <span> with an onClick: not focusable, no aria-checked, no response to the spacebar. For software used in a clinical workflow that is a defect, not a gap.

The design was the part worth keeping. It is now one CSS file, and everything underneath it is maintained by people who do this full time.

Getting started

npx shadcn@latest add https://qure-ui.qure.ai/r/button.json

Then read Installation for the token layer, which is the one piece every component needs.

On this page