Dock
A dock for displaying supplementary content alongside the main interface without interrupting the user’s primary workflow.
Example
Installation
Dialog. Make sure you have installed and configured it before using this component.Install following dependencies:
npm install react-aria-components tw-animate-css tailwindcss-react-aria-components class-variance-authority lucide-react clsx tailwind-merge motionAdd cn helper using clsx and twMerge for conditional class merging in Tailwind components.
Copy and paste the following code into your project.
npx libravelui@latest add dockAnatomy
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…
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.