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, 1 dependents.

File tsx DocumentationAtlas Changelog 6 imports 1 dependents 1 functions

Entity Profile

Dependency Diagram

graph LR
  aff5c331_40eb_1397_1be5_1c33cddb749e["input-group-demo.tsx"]
  c4660ec2_c67c_8de8_aea3_ab3bf7989b6f["dropdown-menu"]
  aff5c331_40eb_1397_1be5_1c33cddb749e --> c4660ec2_c67c_8de8_aea3_ab3bf7989b6f
  d4ae1ebd_39ec_2b17_5c84_fbca1aec26c7["input-group"]
  aff5c331_40eb_1397_1be5_1c33cddb749e --> d4ae1ebd_39ec_2b17_5c84_fbca1aec26c7
  b9edc1c7_b7c5_336c_067b_ecb7e26f1bc3["separator"]
  aff5c331_40eb_1397_1be5_1c33cddb749e --> b9edc1c7_b7c5_336c_067b_ecb7e26f1bc3
  2e5ffaa4_e254_231d_7f3e_d1b7ff0bfae7["tooltip"]
  aff5c331_40eb_1397_1be5_1c33cddb749e --> 2e5ffaa4_e254_231d_7f3e_d1b7ff0bfae7
  39a0d62e_8e7d_d097_eb95_91d2bca361f7["icons-react"]
  aff5c331_40eb_1397_1be5_1c33cddb749e --> 39a0d62e_8e7d_d097_eb95_91d2bca361f7
  d39cd1e4_1b2d_9aa2_1d29_fd0b4bfb61c3["lucide-react"]
  aff5c331_40eb_1397_1be5_1c33cddb749e --> d39cd1e4_1b2d_9aa2_1d29_fd0b4bfb61c3
  53860de0_4d86_dc1d_c85a_07c01f0d1a07["index.tsx"]
  53860de0_4d86_dc1d_c85a_07c01f0d1a07 --> aff5c331_40eb_1397_1be5_1c33cddb749e
  style aff5c331_40eb_1397_1be5_1c33cddb749e fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/examples/radix/ui/dropdown-menu"
import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
  InputGroupText,
  InputGroupTextarea,
} from "@/examples/radix/ui/input-group"
import { Separator } from "@/examples/radix/ui/separator"
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/examples/radix/ui/tooltip"
import { IconCheck, IconInfoCircle, IconPlus } from "@tabler/icons-react"
import { ArrowUpIcon, Search } from "lucide-react"

export 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"
                aria-label="Info"
              >
                <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"
            aria-label="Add"
          >
            <IconPlus />
          </InputGroupButton>
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <InputGroupButton variant="ghost">Auto</InputGroupButton>
            </DropdownMenuTrigger>
            <DropdownMenuContent side="top" align="start">
              <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"
          >
            <ArrowUpIcon />
            <span className="sr-only">Send</span>
          </InputGroupButton>
        </InputGroupAddon>
      </InputGroup>
      <InputGroup>
        <InputGroupInput placeholder="@shadcn" />
        <InputGroupAddon align="inline-end">
          <div className="bg-primary text-foreground flex size-4 items-center justify-center rounded-full">
            <IconCheck className="size-3 text-white" />
          </div>
        </InputGroupAddon>
      </InputGroup>
    </div>
  )
}

Domain

Subdomains

Functions

Dependencies

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

Imported By

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 DocumentationAtlas domain, Changelog 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.
What files import input-group-demo.tsx?
input-group-demo.tsx is imported by 1 file(s): index.tsx.
Where is input-group-demo.tsx in the architecture?
input-group-demo.tsx is located at apps/v4/app/(app)/(root)/components/input-group-demo.tsx (domain: DocumentationAtlas, subdomain: Changelog, directory: apps/v4/app/(app)/(root)/components).

Analyze Your Own Codebase

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

Try Supermodel Free