Reveal
Open details where you need them and collapse them again without leaving the page.
INV-0042
Acme Corp
€1 240.00, due 14 Oct
<script setup lang="ts">import { ref, useId } from 'vue'import { ChevronsUpDown } from '@lucide/vue'import { UiCard, UiTooltip, UiIconButton, UiReveal } from 'grani' const open = ref(false) const detailsId = useId()</script> <template> <UiCard title="INV-0042" description="Acme Corp" class="w-full max-w-sm"> <template #actions> <UiTooltip :content="open ? 'Hide details' : 'Show details'"> <UiIconButton :icon="ChevronsUpDown" variant="outline" :ariaLabel="open ? 'Hide details' : 'Show details'" :aria-expanded="open" :aria-controls="detailsId" @click="open = !open" /> </UiTooltip> </template> <p class="text-sm text-fg">€1 240.00, due 14 Oct</p> <UiReveal :id="detailsId" :open="open"> <dl class="grid grid-cols-[auto_1fr] gap-x-4 gap-y-2 text-sm"> <dt class="text-fg-muted">Sent</dt> <dd class="text-fg">30 Sep to billing@acme.example</dd> <dt class="text-fg-muted">Reminders</dt> <dd class="text-fg">Two, the last on 7 Oct</dd> <dt class="text-fg-muted">Terms</dt> <dd class="text-fg">Net 14, late fee 2%</dd> </dl> </UiReveal> </UiCard></template>
Also called accordion, collapsible, disclosure, expandable section.
Usage
<UiReveal>…</UiReveal> With GraniResolver in the Vite config, a template needs no import: set it up once.
API
| Name · type | Default | Description |
|---|---|---|
| openboolean | The block is shown (v-model:open); the parent owns it, the trigger only asks. Unset, the block starts closed and keeps its own state, which a #trigger toggles. | |
| autofocusboolean= false | false | When the block opens, the focus goes to its first field: a block opened to be typed in, such as a note. A block shown at mount takes no focus. |
Attributes are placed by the component itself: its description says where.
When to use another component
| When you need | Take |
|---|---|
| A panel floating beside its trigger | Popover |
| A record inside a record | A step of Crud drawer |
| Panes switched among others | Tabs |