Input Group

Combine inputs, buttons, and status labels inside a frosted frame. Perfect for search bars, segmented filters, and command strips in the Omni Cloud console.

Examples

Search & Filters
Text addons and ghost actions stay flush with the glass surface.
https://

Installation

pnpm dlx shadcn@latest add @omni/input-group

Usage

import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
} from "@/components/ui/input-group"
<InputGroup>
  <InputGroupAddon>SEARCH</InputGroupAddon>
  <InputGroupInput placeholder="Find services" />
  <InputGroupButton size="icon-sm" variant="ghost">
    <SearchIcon className="size-4" />
  </InputGroupButton>
</InputGroup>