Components

Reveal

Secondary content that appears while its scope is hovered, focused, or holds an open menu, and always shows on touch.

Quarterly report.pdf
Launch notes.md

Composition

Row with hover actions

Hover, keyboard focus, or an open menu inside the nearest RevealScope shows its Reveal content; touch screens always show it.

<RevealScope>
- row content
- <Reveal>
  - <Button />
  </Reveal>
</RevealScope>

Installation

The Control UI source installs this component from src/registry/sources/control-ui/ui/reveal.tsx.

Registry command

npx shadcn@latest add https://control-ui.dev/r/reveal.json

See registry manifest

Raw code

Primary installed source

src/registry/sources/control-ui/ui/reveal.tsx

"use client";

import { useRender } from "@base-ui/react/use-render";

import type { ComponentProps, CSSProperties } from "react";

import type { RenderProp } from "@/components/control-ui/control-props";

import type { RevealKnobStyle } from "@/components/control-ui/knob-contracts/reveal-knobs";

export type RevealScopeProps = Omit<ComponentProps<"div">, "style"> & {

render?: RenderProp<ComponentProps<"div">>;

style?: CSSProperties & RevealKnobStyle;

};

export type RevealProps = Omit<ComponentProps<"span">, "style"> & {

render?: RenderProp<ComponentProps<"span">>;

style?: CSSProperties & RevealKnobStyle;

};

export function RevealScope({ render, ...props }: RevealScopeProps) {

return useRender({

defaultTagName: "div",

render,

props: {

...props,

"data-control-ui": "reveal",

"data-control-family": "reveal",

"data-slot": "scope",

},

});

}

export function Reveal({ render, ...props }: RevealProps) {

return useRender({

defaultTagName: "span",

render,

props: {

...props,

"data-control-ui": "reveal",

"data-control-family": "reveal",

"data-slot": "content",

},

});

}

Knobs

Typed custom properties the recipe paints with. Set one on the root — style, a utility class, or a skin — and every slot inherits it.

--cui-reveal-* · 1 knobsHow the cascade resolves

--cui-reveal-hidden-opacity<number>0