Playground

The live component, with every prop and colour token beside it. Copy JSX and Copy CSS take exactly what the stage runs. Every prop is in the API reference.

liveBasic recipe

Code

The component file and the stylesheet the stage runs. Copy JSX and Copy CSS take these exactly.

"use client";

import { Iris } from "@orrery-ui/iris";
// Styles: paste the CSS output into your global stylesheet.

export default function IrisExample() {
  return (
    <Iris.Root className="vs-theme">
      <Iris.Shadow />
      <Iris.Trigger aria-label="Open sheet">
        <Iris.Shared>
          <div className="vs-basic-art" />
        </Iris.Shared>
      </Iris.Trigger>
      <Iris.Sheet aria-labelledby="vs-sheet-title">
        <Iris.Shared>
          <div className="vs-basic-art" />
        </Iris.Shared>
        <Iris.Close aria-label="Close" />
        <Iris.Content>
          <Iris.Item>
            <h2 id="vs-sheet-title">Sheet title</h2>
          </Iris.Item>
          <Iris.Item>
            <p>
              Everything inside the sheet is yours: plain JSX, styled with the CSS beside it.
            </p>
          </Iris.Item>
        </Iris.Content>
      </Iris.Sheet>
    </Iris.Root>
  );
}