Lenso UI

Foundation component · Navigation

Disclosure

Compact expandable sections for progressive navigation and supporting content.

Live playground

Projects and workspace views.

Choose Disclosure when

  • Use disclosure for optional supporting content, not essential task steps.
  • Choose single expansion when sections compete for the same compact space.

  • The default width is compact; override the root width only when the layout requires it.

Accessibility

  • Base UI connects each trigger to its panel and exposes expanded state.
  • Triggers remain native buttons and support Enter and Space.

Implementation

Base UI owns accordion state and semantics; every visible part remains composable and replaceable.

import { Disclosure } from "@lenso/ui/disclosure";

<Disclosure.Root defaultValue={["workspace"]}>
  <Disclosure.Item value="workspace">
    <Disclosure.Header>
      <Disclosure.Trigger>
        Workspace <Disclosure.Icon />
      </Disclosure.Trigger>
    </Disclosure.Header>
    <Disclosure.Panel>Projects and workspace views.</Disclosure.Panel>
  </Disclosure.Item>
</Disclosure.Root>;
Lenso UI