KbdInputGroup() — ui Function Reference

Architecture documentation for the KbdInputGroup() function in kbd-input-group.tsx from the ui codebase.

Function tsx DocumentationAtlas SearchAPI

Entity Profile

DocumentationAtlas→ SearchAPI→ KbdInputGroup() — ui Function Reference

Dependency Diagram

graph TD
  88d5738b_0687_7f15_2ade_72f1e77c9100["KbdInputGroup()"]
  9036050c_b8fe_f093_f88b_cafaacc23d79["kbd-input-group.tsx"]
  88d5738b_0687_7f15_2ade_72f1e77c9100 -->|defined in| 9036050c_b8fe_f093_f88b_cafaacc23d79
  style 88d5738b_0687_7f15_2ade_72f1e77c9100 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/base/kbd-input-group.tsx lines 9–24

export default function KbdInputGroup() {
  return (
    <div className="flex w-full max-w-xs flex-col gap-6">
      <InputGroup>
        <InputGroupInput placeholder="Search..." />
        <InputGroupAddon>
          <SearchIcon />
        </InputGroupAddon>
        <InputGroupAddon align="inline-end">
          <Kbd>⌘</Kbd>
          <Kbd>K</Kbd>
        </InputGroupAddon>
      </InputGroup>
    </div>
  )
}