Dock — ARC UI

Components

Dock

layout

interactive

<arc-dock>

Overview

Guidelines

When to use

Use for persistent toolbars like media controls that should be accessible but not always visible
Use position="bottom" for media players, status bars, and quick-action toolbars
Use position="left" or position="right" for canvas-based editor tool palettes
Keep dock content concise — icon buttons and compact controls work best
Listen for arc-open and arc-close events to synchronize application state
Combine with IconButton components for a compact, icon-driven toolbar

When not to use

Do not put large forms or lengthy content inside a Dock — use Drawer instead
Do not use Dock for navigation menus — use Sidebar or Drawer
Do not disable auto-hide if the dock contains primary page actions that need constant visibility — use Toolbar instead
Do not nest multiple Docks on the same edge
Do not place Dock content that requires scrolling — keep it single-row or single-column
Do not rely solely on auto-hide for critical actions — ensure keyboard accessibility

Features

Edge-snapped positioning to bottom, left, or right viewport edges
Auto-hide behavior with hover-reveal for non-intrusive persistent access
1px border-surface edge line as a visible affordance when hidden
Accent-primary glow effect on reveal for visual emphasis
Spring easing animation for natural, responsive slide-in/slide-out
Configurable position prop to target different viewport edges
Body scroll preserved — non-blocking overlay that does not lock interaction
Fires arc-open and arc-close events for state synchronization
CSS part: `dock` for targeted ::part() styling
Accessible with appropriate ARIA attributes for toolbar semantics

Preview

Page content area

Usage

This component requires JavaScript. No pure HTML/CSS version is available — use the Web Component directly or a framework wrapper.

<arc-dock position="bottom">
  <arc-icon-button name="skip-back" label="Previous"></arc-icon-button>
  <arc-icon-button name="play" label="Play"></arc-icon-button>
  <arc-icon-button name="skip-forward" label="Next"></arc-icon-button>
  <arc-icon-button name="speaker-high" label="Volume"></arc-icon-button>
</arc-dock>

<script>
  const dock = document.querySelector('arc-dock');
  dock.addEventListener('arc-open', () => console.log('Dock revealed'));
  dock.addEventListener('arc-close', () => console.log('Dock hidden'));
</script>

import { Dock, IconButton } from '@arclux/arc-ui-react';

function MediaControls() {
  return (
    <Dock position="bottom" onArcOpen={() => console.log('open')} onArcClose={() => console.log('close')}>
      <IconButton icon="skip-back" label="Previous" />
      <IconButton icon="play" label="Play" />
      <IconButton icon="skip-forward" label="Next" />
      <IconButton icon="volume-2" label="Volume" />
    </Dock>
  );
}

<script setup>
import { Dock, IconButton } from '@arclux/arc-ui-vue';
</script>

<template>
  <Dock position="bottom" @arc-open="console.log('open')" @arc-close="console.log('close')">
    <IconButton icon="skip-back" label="Previous" />
    <IconButton icon="play" label="Play" />
    <IconButton icon="skip-forward" label="Next" />
    <IconButton icon="volume-2" label="Volume" />
  </Dock>
</template>

<script>
  import { Dock, IconButton } from '@arclux/arc-ui-svelte';
</script>

<Dock position="bottom" on:arc-open={() => console.log('open')} on:arc-close={() => console.log('close')}>
  <IconButton icon="skip-back" label="Previous" />
  <IconButton icon="play" label="Play" />
  <IconButton icon="skip-forward" label="Next" />
  <IconButton icon="volume-2" label="Volume" />
</Dock>

import { Component } from '@angular/core';
import { Dock, IconButton } from '@arclux/arc-ui-angular';

@Component({
  imports: [Dock, IconButton],
  template: `
    <Dock position="bottom" (arcOpen)="onOpen()" (arcClose)="onClose()">
      <IconButton icon="skip-back" label="Previous" />
      <IconButton icon="play" label="Play" />
      <IconButton icon="skip-forward" label="Next" />
      <IconButton icon="volume-2" label="Volume" />
    </Dock>
  `,
})
export class MediaControlsComponent {
  onOpen() { console.log('open'); }
  onClose() { console.log('close'); }
}

import { Dock, IconButton } from '@arclux/arc-ui-solid';

function MediaControls() {
  return (
    <Dock position="bottom" onArcOpen={() => console.log('open')} onArcClose={() => console.log('close')}>
      <IconButton icon="skip-back" label="Previous" />
      <IconButton icon="play" label="Play" />
      <IconButton icon="skip-forward" label="Next" />
      <IconButton icon="volume-2" label="Volume" />
    </Dock>
  );
}

import { Dock, IconButton } from '@arclux/arc-ui-preact';

function MediaControls() {
  return (
    <Dock position="bottom" onArcOpen={() => console.log('open')} onArcClose={() => console.log('close')}>
      <IconButton icon="skip-back" label="Previous" />
      <IconButton icon="play" label="Play" />
      <IconButton icon="skip-forward" label="Next" />
      <IconButton icon="volume-2" label="Volume" />
    </Dock>
  );
}

API

Prop	Type	Default	Description
`position`	`'bottom' \| 'left' \| 'right'`	`'bottom'`	Which viewport edge the dock snaps to. Bottom is the most common for media controls and action bars; left and right are suited for tool palettes in canvas editors.
`auto-hide`	`boolean`	`true`	When true, the dock hides itself when the cursor moves away from the edge and reveals on hover. Set to false to keep the dock permanently visible.
`open`	`boolean`	`false`	Controls the visible state of the dock programmatically. When auto-hide is true, this reflects the current hover-reveal state; when auto-hide is false, use this to toggle visibility manually.

Events

Event	Description
`arc-open`	Fired when the dock becomes visible, either via hover-reveal or programmatic open.
`arc-close`	Fired when the dock hides, either because the cursor left the edge area or the open prop was set to false.

Overview

Guidelines

When to use

When not to use

Features

Preview

Usage

API

Events

See Also

ARC UI

Arclight