Skip to content
IntelliHelper logo

Intelli UI

Glass SystemLiquid Glass

Glass Bar

Neutral Liquid Glass capsule for grouped media controls. Preview live, copy the source, or install with the CLI into your Next.js project.
More glass system
npx @intellihelper/cli@latest add glass-bar

Media controls bar

About this component

Glass Bar is part of Glass System. Neutral Liquid Glass capsule for grouped media controls.

Install with npx @intellihelper/cli@latest add glass-bar. Files land in your project so you can customize styles, variants, and behavior without a locked package.

Prefer AI-assisted install? Use the agent plugin or the MCP server.

When to use Glass Bar

Use when

  • Use Glass Bar when neutral Liquid Glass capsule for grouped media controls.
  • You need frosted chrome (bars, icon buttons, content cards) that sit above expressive product surfaces.
  • You want Liquid Glass hierarchy instead of applying blur to every panel.

Avoid when

  • You only need a single neutral Button with no glass system — start with actions instead.
  • You are shipping a purely text document without chrome chrome layers.

Accessibility notes

  • Keep interactive chrome contrast above WCAG AA against the active mesh or image background.
  • Do not rely on blur alone to communicate state; pair with borders, weight, and focus rings.
  • Icon-only glass controls need accessible names (aria-label or visible text).

Interactive primitives build on accessible patterns (including Radix where applicable). Always verify focus order and contrast on your mesh or product background.

Composition tips

  • Place chrome components (glass-bar, glass-icon-button) above content panels — not nested inside saturated content cards.
  • Pair with theme tokens from Intelli UI so blur, border, and fill stay consistent across pages.

FAQ

Related components

View all glass system →