reacd

Declarative React UI with closed component contracts.

Compose application views in TSX. The renderer and theme adapter handle HTML, styles and responsive layout; Jotai connects application state. Choose shadcn/ui or Material UI. Templates change appearance without changing the view declaration.

Documentation · Get started · Components · Theme adapters · State · Changelog · Contributing · Security

Install

Install @fastsprout/reacd into an existing React application:

npm install @fastsprout/reacd @fastsprout/reacd-shadcn

The getting started guide covers TypeScript's JSX configuration, the provider and browser adapter styles.

Declare a view

import { atom, useAtom } from 'jotai';
import { Text, Toggle, VStack } from '@fastsprout/reacd';

const enabledAtom = atom(false);

export function ToggleExample() {
  const [enabled, setEnabled] = useAtom(enabledAtom);
  return (
    <VStack>
      <Toggle label="Email summaries" checked={enabled} onCheckedChange={setEnabled} />
      <Text>{`Email summaries are ${enabled ? 'enabled' : 'disabled'}.`}</Text>
    </VStack>
  );
}

Select shadcnAdapter from @fastsprout/reacd-shadcn at your ReacdProvider root. For Material UI, install @fastsprout/reacd-mui and select its muiAdapter. This is the runnable Toggle example. Optional generative UI binds components to typed state with explicit read or read/write access.

License

Apache-2.0. Vendored licenses are in third-party notices.