Chamaac UI

Components

  • Overview

    • Introduction

  • Animated Icons

    • Icons Overview

  • Backgrounds

    • Interactive GridNew

  • Buttons

    • Buttons Overview
    • Premium Button
    • Glowing BorderNew
    • Shimmer Button
    • Slide Up Button
    • Focus Button
    • Neo Brutalist

  • Text Animations

    • Text LoopNew
    • Dancing Letters
    • Gif Text

  • Inputs

    • AI InputNew

  • Navigation

    • Dock

  • Sections

    • Stats CardsNew
    • Feature Steps
    • Gauge

  • Carousels

    • Carousel

Dock

A dock navigation component with animated dropdown menus, hover effects, and image previews. Features smooth transitions and interactive menu items. Inspired by jeton.com.

The dock will show on bottom of the page

Jeton CardFees
AboutNewsroomPartnershipsMedia AssetsRelease Notes
Personal
Business
Company

Installation

npx shadcn@latest add https://chamaac.com/r/dock.json

Props

PropTypeDefaultDescription
children*React.ReactNode-Dock items as children. Use DockIcon, DockItem (for dropdowns), and DockLink components to compose the dock navigation.
closeDelaynumber100Delay in milliseconds before closing dropdown menus when mouse leaves
bottomOffsetstring"60px"CSS value for the bottom offset of the dock navigation
activePagestring-Optional path to determine which menu items should be marked as active. If not provided, uses the current pathname from Next.js router.
classNamestring""Custom class names for styling the dock container

DockIcon

Icon button component for the dock

Props

PropTypeDefaultDescription
icon*React.ReactNode-SVG icon or React element to display
href*string-URL to navigate to when clicked
classNamestring""Custom class names for styling

DockItem

Dropdown menu component for the dock

Props

PropTypeDefaultDescription
label*string-Label text for the dropdown trigger
children*React.ReactNode-DockDropdownItem components to display in the dropdown menu
idstring-Optional unique identifier. If not provided, generated from label.
classNamestring""Custom class names for styling

DockDropdownItem

Individual item within a DockItem dropdown

Props

PropTypeDefaultDescription
label*string-Label text for the menu item
href*string-URL to navigate to when clicked
imagestring-Optional image URL to display as preview when hovering or when active
classNamestring""Custom class names for styling

DockLink

Link button component for the dock

Props

PropTypeDefaultDescription
label*string-Label text for the link
href*string-URL to navigate to when clicked
iconReact.ReactNode-Optional icon to display next to the label
externalbooleanfalseWhether the link opens in a new tab
classNamestring""Custom class names for styling