Today we are publishing Nexera UI, an open-source React component library under the MIT licence. It has 176 components, built on React Aria Components and styled with Tailwind CSS v4, and it implements the Nexera Figma design system.
What is in the box
The components cover actions, forms and inputs, navigation, overlays, feedback, data display, communication and media. That includes charts with keyboard-reachable data points and a data table behind every plot. Components support light and dark themes and right-to-left layouts, and many have web, iOS and Android looks through a platform prop.
Install
pnpm add @nexera-ui/react react react-domWrap your app in NexeraProvider. It handles light, dark and system themes, remembers the user's choice, and takes a locale that sets number formats, dates and text direction. Add ThemeScript to the document head so the first paint uses the right theme.
It works with React 18.2 and later, including React 19. Tailwind is optional: if you do not use it, import the precompiled @nexera-ui/react/styles.css. Presentational components such as Badge, Avatar and Card render in React Server Components, and every component is also available as its own subpath import.
What makes it different
Tokens come from Figma. The colours, sizes and radii are generated from the Figma variables, and CI fails if the generated files drift from the snapshot. Why every component starts in Figma explains the pipeline.
Your brand in one call. createTheme({ brand: "#2563EB" }) generates a full brand scale and checks the contrast of every token pair in both modes. See One brand colour, a whole theme.
Accessibility evidence from tests. Tests are tagged with the WCAG 2.2 criteria they demonstrate, and the conformance table is generated from the ones that pass. The table states that it is evidence from automated checks and makes no certification claim. Read Shipping WCAG evidence from unit tests.
What comes next
We are designing an MCP server, @nexera-ui/mcp, so coding agents can look up real props and tokens and check their JSX before they answer. It is planned and not built yet. Teaching AI agents your design system with MCP describes the plan.
Start with get started, browse the components and blocks, and tell us what is missing.