ComponentsBottomBar

BottomBar

Keep tools, activity, notes, or logs below your workspace. Compose your own header and content with accessible collapse controls and bounded sizing.

On this page

Installation

Install component source from the public registry, or use the local workspace package. Follow the setup guide first. The npm package is not published yet.

View registry files

Built with

Implemented with React and browser APIs, without an additional behavior or rendering library.

Shared foundation: React, clsx for conditional classes, tailwind-merge for resolving utility-class conflicts. Styles use Tailwind CSS and Dethink CSS variables.

Based on this component’s source and registry composition. Libraries used only in showcase examples are excluded.

Usage

Import the component into your page or component file.

Usage

import { BottomBar, BottomBarHeader, BottomBarTrigger, BottomBarContent } from "@dethink/components";

Your markup, inside a bottom bar

Standalone notes

Workspace notes

Notes

Show sourceexamples/bottom-bar/basic.tsx

examples/bottom-bar/basic.tsx

"use client";

import {
  BottomBar,
  BottomBarContent,
  BottomBarHeader,
  BottomBarTrigger,
} from "@dethink/components";

export function BottomBarBasic() {
  return (
    <BottomBar size="sm" className="rounded-xl border">
      <BottomBarHeader>
        <strong className="text-sm">Workspace notes</strong>
        <BottomBarTrigger className="ms-auto" />
      </BottomBarHeader>
      <BottomBarContent aria-label="Workspace notes">
        <label className="grid gap-2 text-sm">
          Notes
          <textarea
            aria-label="Notes"
            className="border-border bg-background focus-visible:outline-ring min-h-24 rounded-md border p-2 focus-visible:outline-2"
            placeholder="Your markup, your workflow…"
          />
        </label>
      </BottomBarContent>
    </BottomBar>
  );
}

Place BottomBar directly inside SidebarShell alongside SidebarShellMain. Use span="content" for the work area or span="shell" to span below navigation too. Fragments are supported; if you extract a wrapper component, place it inside SidebarShellFooter instead of expecting the shell to discover nested regions.

BottomBarHeader holds your title, actions and BottomBarTrigger. BottomBarContent holds one scrollable region. Use one content region per bar and place triggers in the header, outside the region they hide. A header-only bar works for persistent status. Omit the entire bar to reserve no space.

For a plain status footer, continue using SidebarShellFooter. BottomBar adds disclosure state and content sizing without requiring a sidebar provider or Motion. See the interactive shell example for placement, sizing and activity recipes.

Props

BottomBar API
Prop	What it does	Default
`BottomBardiv attributes + ref`	Root provider and layout region. Accepts your composed markup, style and className.	Not set
`open / defaultOpen / onOpenChangeboolean / boolean / (open: boolean) => void`	Controlled or uncontrolled disclosure. Content stays mounted while hidden, preserving form state.	`defaultOpen: true`
`size"sm" \| "md" \| "lg"`	Preferred content heights of 10rem, 16rem and 24rem, bounded by maxHeight.	`"md"`
`height / maxHeightstring \| number`	Custom content height and total bar height limit. Numbers are pixels; strings are CSS lengths. Overrides size. Inside SidebarShell, an additional 50% container-height cap preserves main content. Use valid nonnegative CSS lengths.	`maxHeight: "40dvh"`
`span"content" \| "shell"`	Direct SidebarShell placement; content width or full shell width.	`"content"`
`contentIdstring`	Optional stable content ID shared by every trigger; generated automatically with useId otherwise.	Not set
`BottomBarHeaderdiv attributes + ref`	Wrapping header for your title, actions and trigger.	Not set
`BottomBarTriggerbutton attributes + ref`	Native button with synchronized aria-expanded/aria-controls. Custom children replace the chevron. Disabled and preventDefault are respected.	Not set
`expandLabel / collapseLabelstring`	Accessible names for the default icon trigger. Custom icon-only children must supply aria-label.	`"Expand bottom bar" / "Collapse bottom bar"`
`BottomBarContentdiv attributes + ref (except id/hidden)`	Named, keyboard-scrollable region. Set aria-label or aria-labelledby. Root owns ID and hidden state.	Not set

Accessibility and testing

Enter and Space toggle the native button. Tab reaches visible controls and the scrollable region; arrow keys scroll it. Closing while focus is inside returns focus to an enabled trigger. External actions retain their focus. There is no modal focus trap or Escape dismissal. Test with your own content and assistive technology; rendered, axe, SSR/hydration and browser tests cover the primitives.

Theming and limits

Use semantic background, foreground, border and ring tokens, density spacing, className and style. The --bottom-bar-height and --bottom-bar-max-height variables expose sizing. Content scrolls inside the height limit; use a concise wrapping header. The bar adds no animation, drag resizing, persistence or tab behavior. Existing SidebarShellFooter users need no migration; adopt these parts when disclosure is needed.