React

Typed React wrappers over the same glass classes — native elements underneath, portals and keyboard behavior where overlays need them.

Install

Peers: react and react-dom ≥ 18. Load CSS once in the app entry.

npm install caustica-design react react-dom
import 'caustica-design/css'
import { Button, Panel, Modal } from 'caustica-design/core'

caustica-design/react is an alias for the same entry as caustica-design/core.

Usage

import { Button, Panel, PanelHead, PanelTitle } from 'caustica-design/core'

export function ReleasePanel() {
  return (
    <Panel>
      <PanelHead>
        <PanelTitle>Tonight’s release</PanelTitle>
      </PanelHead>
      <Button variant="primary">Name it</Button>
    </Panel>
  )
}

Wrap the app in .ca-root as on Getting started.

Component names

React exports the full kit from caustica-design/core: Button, Panel, Card, Field, Input, Badge, Modal, Tabs, Collapse, Checkbox, Switch, layout (Stack, Grid), overlays (Dropdown, Popover, Tooltip), pickers (Select, DatePicker, Toast, Navbar), and the rest of the presentational primitives.

Each component page under Components documents React props and a copyable snippet.

Events

Overlays use controlled open + onOpenChange. Tabs accepts value + onValueChange. Form controls forward native onChange / onInput from the inner <input>. 

const [open, setOpen] = useState(false)

<Modal open={open} onOpenChange={setOpen} backdropLabel="Dismiss dialog">
  <ModalDialog label="Name this release">…</ModalDialog>
</Modal>

Theme

Toggle light/dark from React with useTheme, or set data-theme on <html> directly. Import setTheme when you need to toggle outside a component. 

import { useTheme } from 'caustica-design/core'

function ThemeToggle() {
  const [theme, setTheme] = useTheme()
  return (
    <Button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
      {theme === 'dark' ? 'Light' : 'Dark'}
    </Button>
  )
}

Persist theme without a flash — see Theming → Avoid a theme flash.

Next steps