Develop ultra fast with Prismane 🎉


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>

Keyboard navigation

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

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

  return (
      onChange={(e) => setValue(}
        { element: "Star", value: "star" },
        { element: "Circle", value: "circle" },
        { element: "Square", value: "square" },