Vibes logo

Side Panel

Installation

Run the following command

npx vibes@latest add side-panel

Usage

import * as SidePanel from '@/vibes/soul/primitives/side-panel';function Usage() {  return (      <SidePanel.Root>          <SidePanel.Trigger asChild>              <button>Show Side Panel</button>          </SidePanel.Trigger>          <SidePanel.Content title="Content">              <p className="text-lg text-contrast-500">Put your content here!</p>          </SidePanel.Content>      </SidePanel.Root>  );}

API Reference

This component uses the Dialog component from Radix UI. Refer to the Radix UI Dialog documentation for more information.

SidePanelProps

PropTypeDefault
children*
ReactNode
title*
string

CSS Variables

This component supports various CSS variables for theming. Here's a comprehensive list.

:root {  --side-panel-overlay-background: color-mix(in oklab, var(--foreground) 50%, transparent);  --side-panel-background: var(--background);  --side-panel-title-text: var(--foreground);  --side-panel-title-font-family: var(--font-family-heading);  --side-panel-content-font-family: var(--font-family-body);}