GlassCommandPalette Component — AuraGlass by AuraOne

Documentation menu · Ai

#Overview

Loading preview

Status

live

#Install and Import

Install the package once, import the component from the public entry, and load styles a single time at the app root.

shell

npm install aura-glass

import

import { GlassCommandPalette } from 'aura-glass'

styles

import 'aura-glass/styles';

#Examples

Three baseline shapes flagship components use across docs and AI-agent guidance:

Basic

tsx

import { GlassCard, GlassCommandPalette } from 'aura-glass';
import 'aura-glass/styles';

export function CommandPaletteExample() {
  return (
    <GlassCard>
      <GlassCommandPalette
        open
        contained
        positionStrategy="inline"
        placeholder="Search commands..."
      />
    </GlassCard>
  );
}

Production

tsx

import { GlassCommandPalette, GlassCard } from 'aura-glass';
import 'aura-glass/styles';

export function GlassCommandPaletteSurface() {
  return (
    <GlassCard depth="medium" tint="neutral">
      <GlassCommandPalette
        aria-label="Ai production surface"
      />
    </GlassCard>
  );
}

Contained

tsx

import { GlassCommandPalette, GlassCard } from 'aura-glass';
import 'aura-glass/styles';

export function GlassCommandPaletteContainedPreview() {
  return (
    <GlassCard style={{ maxWidth: 420 }}>
      <GlassCommandPalette />
    </GlassCard>
  );
}

#Accessibility

Focus should move to the search field, arrow keys should move through commands, and command labels should describe actions rather than visual styling.

#SSR and Performance

Keep command data local or memoized, debounce remote search, and avoid streaming model telemetry unless the palette is open.

#Theming

Theme with public props, `className`, `style`, and AuraGlass CSS variables. Avoid private DOM selectors so the component can upgrade with the package.