Sheet · juxt.ui

Installation #

With the Nuxt module, every component is auto-imported — there is nothing to add. In a plain Vue project, import what you use:

import { JSheet } from '@juxtui/ui'

Usage #

<JButton @click="open = true">Edit profile</JButton>

<JSheet v-model:open="open" title="Edit profile" description="Changes are visible to your team.">
  <JInput v-model="name" label="Name" />
  <template #footer="{ close }">
    <JButton variant="ghost" @click="close">Cancel</JButton>
    <JButton @click="save">Save</JButton>
  </template>
</JSheet>

Sheet shares Dialog’s focus trap, scroll lock and backdrop handling — it just slides in from an edge instead of appearing centred.

Variants & examples #

Sides#

side controls which edge it slides in from: left, right or bottom.

<script setup lang="ts">
const side = ref<'left' | 'right' | 'bottom'>('right')
const open = ref(false)

function openFrom(value: typeof side.value) {
  side.value = value
  open.value = true
}
</script>

<template>
  <div class="flex gap-2">
    <JButton variant="outline" @click="openFrom('left')">Left</JButton>
    <JButton variant="outline" @click="openFrom('right')">Right</JButton>
    <JButton variant="outline" @click="openFrom('bottom')">Bottom</JButton>
  </div>

  <JSheet v-model:open="open" :side="side" title="Filters" description="Narrow down the results.">
    <p class="text-sm text-fg-secondary">
      Sheet content slides in from the {{ side }} edge.
    </p>
  </JSheet>
</template>

Required decision#

With close-on-overlay and close-on-escape off, dismissal attempts get a small nudge instead.

<script setup lang="ts">
const open = ref(false)
</script>

<template>
  <JButton variant="outline" @click="open = true">Review changes</JButton>

  <JSheet
    v-model:open="open"
    title="Unsaved changes"
    description="You have edits that haven’t been published. Try pressing Escape or clicking outside."
    :close-on-overlay="false"
    :close-on-escape="false"
    hide-close
  >
    <template #footer="{ close }">
      <JButton variant="ghost" @click="close">Discard</JButton>
      <JButton @click="close">Publish</JButton>
    </template>
  </JSheet>
</template>

API #

Props

Prop	Type	Default	Description
open	`boolean`	`false`	Bound with `v-model:open`.
title	`string`	—	Heading. Labels the sheet.
description	`string`	—	Supporting text. Describes the sheet.
side	`'right' \| 'left' \| 'bottom'`	`'right'`	Edge the sheet slides in from.
size	`'sm' \| 'md' \| 'lg'`	`'md'`	Width (or height for `bottom`): 320, 400 or 560px.
closeOnOverlay	`boolean`	`true`	Close when the backdrop is clicked.
closeOnEscape	`boolean`	`true`	Close when Escape is pressed.
hideClose	`boolean`	`false`	Hide the close button in the corner.
ariaLabel	`string`	—	Accessible name when there is no visible title.

Events

Event	Payload	Description
update:open	`boolean`	Emitted when the sheet asks to close.
afterClose	—	After the leave transition — a good moment to reset form state.

Slots

Slot	Props	Description
default	`{ close }`	Body content.
footer	`{ close }`	Actions, right-aligned.
header	`{ titleId, descriptionId }`	Replace the header. Put `titleId` on your heading to keep the sheet labelled.

Methods

Method	Signature	Description
close()	`() => void`	Close the sheet programmatically.

Accessibility #

role="dialog" with aria-modal, labelled by the title and described by the description.
On open, focus moves to an element marked autofocus, else the first form field, else the sheet itself.
On close, focus returns to whatever opened it.
A click only dismisses when it both starts and ends on the backdrop — dragging a text selection out of the sheet never closes it.
Under reduced motion, the sheet fades in place instead of sliding from its edge.

Keyboard #

Key	Action
`Tab`	Moves focus to the next element inside the sheet, wrapping at the end.
`ShiftTab`	Moves focus backwards, wrapping at the start.
`Esc`	Closes the sheet (unless `close-on-escape` is off, in which case it nudges instead).