Component

CommandBar

Command palette / spotlight search with AI integration. Supports two modes: search mode and AI mode.

tsx

import { CommandBar } from 'wss3-forge'

Usage

•

SEARCH MODE: Type keywords like "dashboard" → shows matching results

•

AI MODE: Type questions or commands like "how do I add a user?" → activates AI

•

AI triggers: questions (how/what/where), commands (show/create/add), or ending with ?

•

Keyboard: Cmd+K to open, arrows to navigate, Enter to select, ESC to close

Examples

Search Mode - Triggered by keywords (e.g. "dashboard", "settings")

dashESC

Dashboard

Main dashboard

page

Dashboard Settings

Configure dashboard

settings

tsx

1// User types: "dash"
2// → Search icon shown, results appear below
3 
4<CommandBar
5  open={true}
6  onSearch={(query) => items.filter(i => i.title.includes(query))}
7  onResultSelect={(result) => navigate(result.route)}
8/>

AI Mode - Triggered by natural language (questions, commands)

✦how do I create a modal?ESC

tsx

1// User types: "how do I create a modal?"
2// → Sparkle icon shown with glow effect, "Ask" button appears
3 
4<CommandBar
5  open={true}
6  onAiQuery={async (query) => {
7    const response = await askAI(query)
8    return { type: 'info', message: response }
9  }}
10/>

AI Mode with Response

✦how do I create a modal?ESC

To create a modal, use the Modal component with the open and onClose props. Would you like to see the documentation?

tsx

1// After AI responds
2// → Shows response with action button
3 
4<CommandBar
5  onAiQuery={async (query) => ({
6    type: 'navigate',
7    message: 'Use the Modal component with open and onClose props.'
8  })}
9  onAiAction={(response) => navigate('/docs/modal')}
10/>

Tabs

Dropdown

Last updated: December 2025