Presentation

Presentations are reusable element shapes exposed through data-dn-presentation.

Button

export default function ButtonPresentationExample() {
  return (
    <span data-dn-presentation="button" data-dn-emphasis="secondary">
      Button presentation
    </span>
  );
}

Input

export default function InputPresentationExample() {
  return <span data-dn-presentation="input">Input presentation</span>;
}

Card

The card presentation adds slight padding, rounded corners, and a subtle shadow.

export default function CardPresentationExample() {
  return (
    <div data-dn-presentation="card" data-dn-level="2">
      <span style={{ display: "block", fontSize: "0.875rem" }}>
        Card presentation
      </span>
      <span style={{ color: "var(--dn-color-text)", fontSize: "0.8125rem" }}>
        A compact surface for cards, popovers, and dropdowns.
      </span>
    </div>
  );
}