Toggle Vault

Animated toggle vault component with trigger, close button, and expandable content panel.

Installation

npx shadcn@latest add @scrollxui/toggle-vault

Usage

import {
  ToggleVault,
  ToggleVaultTrigger,
  ToggleVaultContent,
  ToggleVaultClose,
} from '@/components/ui/toggle-vault';

<ToggleVault>
  <ToggleVaultTrigger className='w-20 h-8 text-sm'>MENU</ToggleVaultTrigger>
  <ToggleVaultClose className='w-20 h-8 text-sm'>CLOSE</ToggleVaultClose>
  <ToggleVaultContent className='w-75 h-62.5 p-8 text-xl flex flex-col gap-4'>
    <a href='#home'>HOME</a>
    <a href='#about'>ABOUT</a>
    <a href='#projects'>PROJECTS</a>
    <a href='#contact'>CONTACT</a>
  </ToggleVaultContent>
</ToggleVault>

API Reference

Toggle Vault

Expandable vault component with animated open/close, trigger button, and content panel.

Props

Property	Type	Default	Description
`children`	ReactNode	`required`	Nested elements to be rendered inside the component. Required for all ToggleVault components.
`className`	string	`""`	Optional Tailwind or custom classes to style the component.
`open`	boolean	`false`	Internal state representing whether the vault is open. Used in ToggleVault context.
`toggleOpen`	() => void	`required`	Function to toggle the open state of the vault. Provided by ToggleVault context and used by Trigger and Close components.