ComponentsCore

Dock

A dock for displaying supplementary content alongside the main interface without interrupting the user’s primary workflow.

Example

Installation

Install following dependencies:

npm install react-aria-components tw-animate-css tailwindcss-react-aria-components class-variance-authority lucide-react clsx tailwind-merge motion

Add cn helper using clsx and twMerge for conditional class merging in Tailwind components.

lib/utils.ts

Copy and paste the following code into your project.

components/ui/core/dock.tsx
npx @libravelui@latest add dock

Anatomy

import {
  DockContent,
  DockHeader,
  DockTitle,
  DockDescription,
  Dock,
  DockFooter,
  DockTrigger,
  DockBody,
} from "@/components/ui/core/dock";
<Dock>
  <DockTrigger>Open Dock</DockTrigger>

  <DockContent side="right">
    <DockHeader>
      <DockTitle>CONTENT BELONGS HERE</DockTitle>
      <DockDescription>CONTENT BELONGS HERE</DockDescription>
    </DockHeader>

    <DockBody>CONTENT BELONGS HERE</DockBody>

    <DockFooter>CONTENT BELONGS HERE</DockFooter>
  </DockContent>
</Dock>

Another Examples

Positions

Flexible placement options for the dock component on any side of the screen. Useful for building responsive layouts with precise control.

Float

A floating dock that hovers above other content, enabling quick interactions without disrupting the main layout. Ideal for tooltips or quick actions.

Sticky

A dock that stays fixed in place while scrolling. Great for persistent navigation or quick access to key features.

Props

Loading types…

Edit on GitHub

Dialog

A dialog is a component used to capture user input, present important information, confirm critical actions, or prompt users to make decisions — all without requiring them to leave the current screen or context.

Modal

An element that overlays the main content of a webpage, requiring user interaction before returning to the underlying page.