Skip to content
IntelliHelper logo

Intelli UI

Glass SystemLiquid Glass

Component Preview

Live preview with syntax-highlighted source and copy. Preview live, copy the source, or install with the CLI into your Next.js project.
More glass system
npx @intellihelper/cli@latest add component-preview

Login card preview

Wrap any UI with collapsible, copy-ready source.

About this component

Component Preview is part of Glass System. Live preview with syntax-highlighted source and copy.

Install with npx @intellihelper/cli@latest add component-preview. 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 Component Preview

Use when

  • Use Component Preview when live preview with syntax-highlighted source and copy.
  • 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 →