React

Naturally and React: Two Birds of a Feather

Natura11y React gives React projects a component layer that stays aligned with Natura11y Core. The components use the same CSS foundation as the vanilla examples, while interactive behavior is handled through React state, props, refs, and hooks.

React at a Glance

Natura11y’s prebuilt React components make starting any React project a breeze. Use Natura11y React as a package layer on top of Natura11y Core.

Same styling foundation
Import Core CSS once, or use the CDN or Sass source, and keep the same classes, CSS variables, and utilities across React and vanilla examples.
React-owned interaction
Interactive components use React props, state, refs, and hooks instead of DOM initialization from Natura11y’s vanilla JavaScript.
Accessible starter components
Start from components that carry the same semantics and behavior patterns documented in Core.

Getting Started

Natura11y React is available as the experimental beta package @natura11y/react. It is designed for React 19 apps that want to use the same styling foundation, utilities, and accessibility patterns as Natura11y Core.

npm install @natura11y/react@beta

React and React DOM are peer dependencies. Your app should provide React 19.

Import the Core stylesheet once in your app entry point:

import '@natura11y/core/css';

Then import the React components you need:

import { Alert, Button } from '@natura11y/react';

Hooks are available from the hooks export:

import { useFocusTrap } from '@natura11y/react/hooks';

Natura11y React does not replace your React framework. It gives React projects the same component language, styling foundation, and accessibility patterns used by Natura11y Core.