Accessibility

All of our components support ARIA attributes, some of Prismane's components already have prebuilt ones. We also support dark mode and keyboard navigation out of the box.

Passing ARIA Attributes

All of our components support ARIA attributes out of the box.

<Box aria-label="prismane-box"></Box>

Dark Mode Support

All of our components have dark mode support out of the box.

function Demo() {
  const { toggleThemeMode } = usePrismaneTheme();

  return (
    <Stack gap={fr(5)}>
      <Avatar color="primary">MP</Avatar>
      <Button onClick={() => toggleThemeMode()}>Toggle Theme</Button>
    </Stack>
  );
}

Some of our components support custom made keyboard navigation. You can navigate using the arrow keys.

function Demo() {
  const [value, setValue] = useState("star");

  return (
    <SelectField
      value={value}
      onChange={(e) => setValue(e.target.value)}
      options={[
        { element: "Star", value: "star" },
        { element: "Circle", value: "circle" },
        { element: "Square", value: "square" },
      ]}
    />
  );
}

Go BackPassing Refs

Accessibility

Passing ARIA Attributes

Dark Mode Support

Keyboard navigation