Vault

March 31, 2025

A bottom sheet component with drag gesture support that slides up from the bottom of the screen. Perfect for displaying additional content, forms, or navigation options without leaving the current view.

Motion

Beautiful, fluid motions bring the interface to life, conveying status, providing feedback and instruction, and enriching the visual experience of your app or game.

./src/components/UI/ VaultMain .astro

---
import { Vault } from "@butter-js/ui";
---

<Vault
  labelClass={`bg-zinc-200 dark:bg-zinc-700 px-5 py-2 rounded-xl`}
  vaultClass="z-41 bg-zinc-100 dark:bg-zinc-800 pb-5 px-5 rounded-2xl"
  notchClass="bg-zinc-300 dark:bg-zinc-600"
  footerClass="bg-zinc-100 dark:bg-zinc-800 z-40"
>
  <h3 class="mt-0 mb-3 p-0">Motion</h3>
  <p class="mb-3 dark:text-zinc-50">
    Beautiful, fluid motions bring the interface to life, conveying status,
    providing feedback and instruction, and enriching the visual experience of
    your app or game.
  </p>
  <img
    src="https://w0.peakpx.com/wallpaper/236/488/HD-wallpaper-mac-os-ventura-dark-macos-ventura-macbook-apple-computer.jpg"
    alt="Imagen"
    class="rounded-2xl h-[400px] object-cover w-full"
  />
</Vault>

Features

Draggable interface
Smooth animations
Content scrolling
Interactive notch

API Reference

Prop	Default	Type	Description
`label`	’Vault’	`string`	Text for the button that opens the Vault component
`labelClass`	-	`string`	Additional CSS classes for the button
`vaultClass`	-	`string`	Additional CSS classes for the main container
`footerClass`	-	`string`	Additional CSS classes for the Vault footer
`notchClass`	-	`string`	Additional CSS classes for the drag indicator (notch)
`easeOpen`	’power4.out’	`string`	GSAP animation function for opening the Vault
`easeStretch`	’elastic(1, 0.75)‘	`string`	GSAP animation function for stretching effect
`durationOpen`	0.4	`number`	Duration (in seconds) of the opening animation
`durationStretch`	0.5	`number`	Duration (in seconds) of the stretching animation