Application Dock
AI Pass+toolbar#dock#magnification#macos#dark-mode#responsive
Preview
1280 px
AI Assistant
Grab the code for this component with a free account
Every free component’s full source, ready to copy or download, plus 30 monthly AI credits for Atheros AI routing to make it yours.
Code
Grab the code for this component with free account
Every free component's full source, ready to copy or download, plus 30 monthly AI credits for Atheros AI routing to make it yours.
Toolbar component
About Application Dock
A macOS-style application dock on a liquid glass shelf, with cursor-proximity icon magnification, a launch bounce, glass hover tooltips, keyboard focus support, and light and dark modes over its own abstract violet wallpaper.
Features
- Cursor-proximity magnification with smooth eased falloff
- Spring-style launch bounce on click
- Liquid glass shelf and tooltip that blur the wallpaper behind them
- Hover and focus tooltips with an entrance animation
- Grouped app and utility sections with a divider
- Light/dark toggle with persisted preference
- Respects
prefers-reduced-motionby disabling magnification - Keyboard-focusable dock items with visible focus tooltips
Accessibility
- ARIA labels
- Every dock item has an
aria-label - Grouping
role="group"on app and utility sections- Toggle
- Dark-mode checkbox has an
aria-label - Keyboard focus
- Dock items are focusable and show tooltips on focus
- Reduced motion
prefers-reduced-motion: reducedisables magnification
Customise it with AI
Open Application Dock in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the toolbar is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.
Explore Other Components
View all
Toolbar
VanillaReact
An accessible WAI-ARIA formatting toolbar with roving tabindex, toggle and single-select control groups, hover/focus tooltips, and an overflow menu — fully token-driven and design-system agnostic.
#toolbar#navigation
Pill Pagination
VanillaReact
A pure CSS pills pagination with rounded items, ellipsis windowing for 9 pages, and keyboard navigation — fully token-driven and design-system agnostic.
#cards#navigation#pagination
Timeline Scroll
VanillaReact
A scroll-driven expedition timeline whose center rail fills with a glacial-azure gradient as you scroll. Day badges anchor beside their rail nodes and country-tagged cards reveal in a soft cascade with flag markers, activity tags and a leg stat to the next stop.
#card#timeline
Outlined Toasts
VanillaReact
A grid of eight outlined toast notifications — each a light-tinted card with a 1.5px coloured outline, a 24px line icon, a short message, and a smoothly filling progress bar. One toast spins a loader; one carries an inline link. Fully token-driven and design-system agnostic.
#toast#notification
Modal — Bottom Sheet
VanillaReact
An accessible mobile-app bottom sheet that springs up from the bottom edge with a grab handle, an amount summary, and list-rows instead of a paragraph — a fintech payment-confirmation sheet themed by the Neovault design system (inspired by Revolut), with a full-width pill CTA and full keyboard.
#modal#dialog#animation
Segmented Progress
VanillaReact
A techy HUD segmented progress meter — discrete cells that fill toward a target across a vibrant cool-to-hot color ramp, with a monospace step count, a tick scale, and a per-cell glow. Token-driven and design-system agnostic.
#progress#progress-bar#segmented
Ready to build?
300+ production-ready components and Atheros AI models. Every paid plan includes access to the whole Atheros — AI Builder and Learning.
Starting at $9.9 per month, billed annually
