PyraDock

Dock

A polished bottom navigation surface with icon-forward actions, active state accents, and glassmorphic styling for mobile layouts or secondary command bars.

Luminous Dock

Blur, soft gradients, and active states make the dock feel at home over rich backgrounds.

Inline mode

Now Playing

Create immersive navigation

Swap icons, pulse notifications, and slide the dock inline in product tours or device frames. The inline mode keeps it inside your layout so the rest of the doc stays perfectly readable.

Soft blur glass treatment pairs with bold iconography.
Active states glow with light rings and subtle scale.
Perfect for onboarding modals, app previews, and hero mockups.


        <.dock id="mobile-dock" position={:inline} class="border border-white/20 bg-white/80 backdrop-blur-xl">
          <:item icon="hero-home" label="Home" active={true} />
          <:item icon="hero-magnifying-glass" label="Search" />
          <:item icon="hero-bolt" label="Actions" />
          <:item icon="hero-bell-alert" label="Alerts" />
          <:item icon="hero-user-circle" label="Account" />
        </.dock>

Anchored Dock

Use position=inline alongside utility classes to simulate a pinned dock inside marketing shots or prototypes.

Viewport anchored

Float the dock above any dashboard canvas

Inline mode paired with absolute positioning lets you build polished hero shots or in-app previews without fighting fixed positioning on the docs page.


        <.dock id="app-dock" position={:inline} class="mx-auto max-w-xl border border-slate-200/80 bg-white/95 backdrop-blur-lg">
          <:item icon="hero-home-modern" label="Dashboard" active={true} />
          <:item icon="hero-chart-bar" label="Metrics" />
          <:item icon="hero-plus-circle" label="New" />
          <:item icon="hero-inbox-stack" label="Inbox" />
        </.dock>

Props

Configure icon labels, navigation targets, and choose between fixed or inline positioning for prototype or production use.

Prop	Type	Default	Description
id	string	—	Unique ID for the dock element.
position	:fixed \| :inline	:fixed	Choose viewport anchored behavior or inline/glass surface rendering.
class	string	""	Append utility classes for custom palettes, shadows, or width.
item slot	slot	—	Define each dock item’s icon, label, navigation target, and active state.