Dashral Pro is hereSee pricing

Dashral

RevealNew

Content that appears and disappears in place, its height growing so nothing below jumps.

$ pnpm dlx shadcn@latest add @dashral/reveal

Delivery in 2–3 working days.

Installation

$ pnpm dlx shadcn@latest add @dashral/reveal

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Or by its full URL: https://dashral.com/r/reveal.json

When to use

  • Something that appears in place when it's needed: an error under a field or in a dialog, a field that depends on a choice, a hint.

When not to use

  • A section people open themselves, with a title to click: Collapsible.
  • A message that floats over the page and goes away: Toast.

Usage

Shown while open is true; what's below moves down smoothly instead of jumping.

example.tsx
"use client"

import { useState } from "react"
import { Button } from "@/components/dashral/button"
import { Reveal } from "@/components/dashral/reveal"

export default function SaveWithError() {
  const [failed, setFailed] = useState(false)

  return (
    <div className="grid max-w-sm gap-2">
      <Button onClick={() => setFailed(true)}>Save</Button>
      <Reveal open={failed} className="text-sm text-destructive-text">
        <p role="alert">Couldn't save. Check your connection and try again.</p>
      </Reveal>
    </div>
  )
}

Using the npm package? Import from @dashral/ui/components/reveal instead, here and in the examples; the rest is the same.

Examples

A list of rows

RevealList with a Reveal as="li" per row: add one under the field, × takes one away.

  • maya@acme.com

API reference

Reveal

PropTypeDefault
openboolean

Shown while true: it grows in when it turns true and folds away when it turns false. Inside a RevealList, a row shows while it's in the list.

true
as"div" | "li" | "span"

The element it is: li for a row of a RevealList, span inside a line of text.

"div"
childrenReactNode

What appears: a message, a field, a hint.

—
idstring

Its id, e.g. for aria-describedby on the field it explains.

—
classNamestring

Classes of what's inside (the part that fades), e.g. its text color.

—

RevealList

PropTypeDefault
as"ul" | "ol" | "div"

The list's element.

"ul"
childrenReactNode

Its rows: a Reveal each, as="li", with a key. Added rows grow in and removed ones fold away in the Motion edition; here they appear and go at once.

—
…HTMLAttributes

Anything a list takes: className, aria-label.

—

Accessibility

  • Closed, it's out of the page: screen readers and the keyboard skip it.
  • For an error that should be read out as it appears, put role="alert" on what's inside.

Motion

  • Opening, the height grows at a calm pace (--duration-considered) while the content fades in, dropping a little. Closing, the content fades out first while the height waits, then gathers speed (--ease-exit), so no line is cut through.
  • In a grid or a flex column, the gap it brings grows and shrinks with it, so what's below never jumps when it's added or taken away.
  • With reduced motion it appears and goes at once.