Input
A fully round text field on the ChatGPT size scale, with an optional leading icon and trailing slot.
Interactive preview · desktop · dark
Installation
Installation is available on the Startup and Business plans. Your personal install command appears here once you have access.
Usage
Import it, pass your props, and make it part of your product.
example.tsx
import { Search } from 'lucide-react';import { InputPill } from '@/components/component-kit/items/input-pill';
export function Example() { return ( <InputPill size="lg" leadingIcon={Search} placeholder="Search projects" /> );}Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | "sm" | "default" | "lg" | default | Field height: 28, 32 or 36px. |
leadingIcon | LucideIcon | — | Icon inside the left edge. |
trailing | ReactNode | — | Content inside the right edge, such as a shortcut hint. |