ui Architecture Docs
Home / File/ input-group-demo.tsx — ui Source File

input-group-demo.tsx — ui Source File

Architecture documentation for input-group-demo.tsx, a tsx file in the ui codebase. 6 imports, 0 dependents.

File tsx ComponentRegistry ChartRegistry 6 imports 1 functions

Entity Profile

Dependency Diagram

graph LR
  cfa575b4_eae7_caed_6268_ced9a26772cb["input-group-demo.tsx"]
  39a0d62e_8e7d_d097_eb95_91d2bca361f7["icons-react"]
  cfa575b4_eae7_caed_6268_ced9a26772cb --> 39a0d62e_8e7d_d097_eb95_91d2bca361f7
  d39cd1e4_1b2d_9aa2_1d29_fd0b4bfb61c3["lucide-react"]
  cfa575b4_eae7_caed_6268_ced9a26772cb --> d39cd1e4_1b2d_9aa2_1d29_fd0b4bfb61c3
  d1cb37f2_0d1d_01bc_0d60_a15219afac51["dropdown-menu"]
  cfa575b4_eae7_caed_6268_ced9a26772cb --> d1cb37f2_0d1d_01bc_0d60_a15219afac51
  41df1c2c_a3b4_dc22_8bc9_310fe8b6ba9b["input-group"]
  cfa575b4_eae7_caed_6268_ced9a26772cb --> 41df1c2c_a3b4_dc22_8bc9_310fe8b6ba9b
  b2c60dee_4ede_8485_a6b4_91c999cdc69f["separator"]
  cfa575b4_eae7_caed_6268_ced9a26772cb --> b2c60dee_4ede_8485_a6b4_91c999cdc69f
  a2518e24_160d_3f8f_bb12_2206d8e84ab8["tooltip"]
  cfa575b4_eae7_caed_6268_ced9a26772cb --> a2518e24_160d_3f8f_bb12_2206d8e84ab8
  style cfa575b4_eae7_caed_6268_ced9a26772cb fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import { IconCheck, IconInfoCircle, IconPlus } from "@tabler/icons-react"
import { ArrowUpIcon, Search } from "lucide-react"

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/registry/new-york-v4/ui/dropdown-menu"
import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
  InputGroupText,
  InputGroupTextarea,
} from "@/registry/new-york-v4/ui/input-group"
import { Separator } from "@/registry/new-york-v4/ui/separator"
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/registry/new-york-v4/ui/tooltip"

export default function InputGroupDemo() {
  return (
    <div className="grid w-full max-w-sm gap-6">
      <InputGroup>
        <InputGroupInput placeholder="Search..." />
        <InputGroupAddon>
          <Search />
        </InputGroupAddon>
        <InputGroupAddon align="inline-end">12 results</InputGroupAddon>
      </InputGroup>
      <InputGroup>
        <InputGroupInput placeholder="example.com" className="!pl-1" />
        <InputGroupAddon>
          <InputGroupText>https://</InputGroupText>
        </InputGroupAddon>
        <InputGroupAddon align="inline-end">
          <Tooltip>
            <TooltipTrigger asChild>
              <InputGroupButton className="rounded-full" size="icon-xs">
                <IconInfoCircle />
              </InputGroupButton>
            </TooltipTrigger>
            <TooltipContent>This is content in a tooltip.</TooltipContent>
          </Tooltip>
        </InputGroupAddon>
      </InputGroup>
      <InputGroup>
        <InputGroupTextarea placeholder="Ask, Search or Chat..." />
        <InputGroupAddon align="block-end">
          <InputGroupButton
            variant="outline"
            className="rounded-full"
            size="icon-xs"
          >
            <IconPlus />
          </InputGroupButton>
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <InputGroupButton variant="ghost">Auto</InputGroupButton>
            </DropdownMenuTrigger>
            <DropdownMenuContent
              side="top"
              align="start"
              className="[--radius:0.95rem]"
            >
              <DropdownMenuItem>Auto</DropdownMenuItem>
              <DropdownMenuItem>Agent</DropdownMenuItem>
              <DropdownMenuItem>Manual</DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
          <InputGroupText className="ml-auto">52% used</InputGroupText>
          <Separator orientation="vertical" className="!h-4" />
          <InputGroupButton
            variant="default"
            className="rounded-full"
            size="icon-xs"
            disabled
          >
            <ArrowUpIcon />
            <span className="sr-only">Send</span>
          </InputGroupButton>
        </InputGroupAddon>
      </InputGroup>
      <InputGroup>
        <InputGroupInput placeholder="@shadcn" />
        <InputGroupAddon align="inline-end">
          <div className="bg-primary text-primary-foreground flex size-4 items-center justify-center rounded-full">
            <IconCheck className="size-3" />
          </div>
        </InputGroupAddon>
      </InputGroup>
    </div>
  )
}

Domain

Subdomains

Functions

Dependencies

  • dropdown-menu
  • icons-react
  • input-group
  • lucide-react
  • separator
  • tooltip

Source

Frequently Asked Questions

What does input-group-demo.tsx do?
input-group-demo.tsx is a source file in the ui codebase, written in tsx. It belongs to the ComponentRegistry domain, ChartRegistry subdomain.
What functions are defined in input-group-demo.tsx?
input-group-demo.tsx defines 1 function(s): InputGroupDemo.
What does input-group-demo.tsx depend on?
input-group-demo.tsx imports 6 module(s): dropdown-menu, icons-react, input-group, lucide-react, separator, tooltip.
Where is input-group-demo.tsx in the architecture?
input-group-demo.tsx is located at apps/v4/registry/new-york-v4/examples/input-group-demo.tsx (domain: ComponentRegistry, subdomain: ChartRegistry, directory: apps/v4/registry/new-york-v4/examples).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free