Introduction

BTNG.UI is a public React component library and design system for e-commerce. It ships two things.

1. A small set of accessible primitives (Button, Input, Label, Badge, Card, Dialog) and composed blocks (Product card, and more to come).
2. A design token layer with eight colour schemes, typography, radii, motion. Tailwind v4 exposes the semantic tokens as utilities.

Components are not a runtime dependency. You install them with the shadcn CLI, which copies the source into your project. After install, the code is yours. Edit it, delete the parts you don't need, replace the tokens with your own.

Why another component library

Because most of them are framework-agnostic, and that makes them too general for commerce work. Variant pickers, price displays, wishlist buttons, quick-add flows, and the small decisions around them have a shape that doesn't appear in a general-purpose kit. I've spent twenty years building those patterns for clients. BTNG.UI is what I would hand my past self.

What you get on day one

• Six primitives with first-person reasoning in each component page.
• One commerce block: Product card.
• A token system you can override per project or per section via data-scheme.
• A11y defaults from Radix: focus traps, keyboard handlers, accessible labels.

What's next

More blocks, not more primitives. The primitives are mostly stable; the blocks are where the specificity lives.

See Installation to add your first component.