04 / REACT COMPONENT LIBRARY
BLD8 UI
A place to work on the details that make an interface feel right. React components, shared foundations and small, purposeful interactions.
01 / Purpose
The details, in one place.
Buttons, forms and overlays are easy to treat as separate pieces. This project brings their spacing, states and behaviour together, so each part feels like it belongs to the same interface.
The first edition is aimed at React and Next.js work: dashboards, internal tools and early product ideas. The public showcase is a place to try the components and see how they fit together.
02 / Design
Quiet surfaces. Clear actions.
White panels sit on light grey. Black carries the primary actions; yellow marks selection and emphasis. Shared spacing and type keep forms, menus and larger layouts aligned.
Motion follows the same approach: a tab indicator moves between choices, a loading button keeps its width, and the navigation gains a soft shadow as the page scrolls. Shared easing gives these small transitions a consistent feel. Reduced-motion settings keep the state changes without the movement.
03 / Engineering
A reusable layer over Base UI.
Base UI provides the foundation for complex interactions such as dialogs, menus and selection. BLD8 UI adds typed React APIs, original styling and shared colour, spacing and motion tokens. Simpler controls use native HTML.
The component package uses TypeScript and plain CSS, independently of Next.js. A separate Next.js showcase consumes its public exports for the catalog, motion studies and working examples. The same components drive the demos.
04 / First edition
Working components, with room to improve.
The current catalog covers forms, navigation, overlays, feedback and a basic data table, with light and dark themes. Examples use sample data and reset on reload.
Browser checks cover keyboard behaviour, focus return, responsive layouts, reduced motion and automated accessibility. Manual screen-reader and wider browser review are still ahead. The showcase is live; the package has not been published to npm.
05 / Notes to self
Use it before growing it.
The next step is to use the components in a real project, see where the APIs get in the way, and refine the states that only show up through use. More components can follow once the foundations hold up.