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

input-group-in-card.tsx — ui Source File

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

File tsx DocumentationAtlas ContentSourcing 6 imports 1 functions

Entity Profile

Dependency Diagram

graph LR
  73cbdd0b_a9e2_8ebe_1bef_32f1156bdc32["input-group-in-card.tsx"]
  4b1d2128_46d9_46f0_b915_b6e1925b7876["button"]
  73cbdd0b_a9e2_8ebe_1bef_32f1156bdc32 --> 4b1d2128_46d9_46f0_b915_b6e1925b7876
  a3f5dc6c_2f22_a06c_c4d4_d84a4ed2818e["card"]
  73cbdd0b_a9e2_8ebe_1bef_32f1156bdc32 --> a3f5dc6c_2f22_a06c_c4d4_d84a4ed2818e
  b5f68436_cf6b_fba3_fb29_abf27fd13442["field"]
  73cbdd0b_a9e2_8ebe_1bef_32f1156bdc32 --> b5f68436_cf6b_fba3_fb29_abf27fd13442
  9af00736_7b63_3c3c_87d0_68c5200c5d80["input"]
  73cbdd0b_a9e2_8ebe_1bef_32f1156bdc32 --> 9af00736_7b63_3c3c_87d0_68c5200c5d80
  d4ae1ebd_39ec_2b17_5c84_fbca1aec26c7["input-group"]
  73cbdd0b_a9e2_8ebe_1bef_32f1156bdc32 --> d4ae1ebd_39ec_2b17_5c84_fbca1aec26c7
  d39cd1e4_1b2d_9aa2_1d29_fd0b4bfb61c3["lucide-react"]
  73cbdd0b_a9e2_8ebe_1bef_32f1156bdc32 --> d39cd1e4_1b2d_9aa2_1d29_fd0b4bfb61c3
  style 73cbdd0b_a9e2_8ebe_1bef_32f1156bdc32 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import { Button } from "@/examples/radix/ui/button"
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/examples/radix/ui/card"
import { Field, FieldGroup, FieldLabel } from "@/examples/radix/ui/field"
import { Input } from "@/examples/radix/ui/input"
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
  InputGroupText,
  InputGroupTextarea,
} from "@/examples/radix/ui/input-group"
import { ExternalLinkIcon, MailIcon } from "lucide-react"

export function InputGroupInCard() {
  return (
    <Card className="w-full">
      <CardHeader>
        <CardTitle>Card with Input Group</CardTitle>
        <CardDescription>This is a card with an input group.</CardDescription>
      </CardHeader>
      <CardContent>
        <FieldGroup>
          <Field>
            <FieldLabel htmlFor="email-input">Email Address</FieldLabel>
            <InputGroup>
              <InputGroupInput
                id="email-input"
                type="email"
                placeholder="you@example.com"
              />
              <InputGroupAddon align="inline-end">
                <MailIcon />
              </InputGroupAddon>
            </InputGroup>
          </Field>
          <Field>
            <FieldLabel htmlFor="website-input">Website URL</FieldLabel>
            <InputGroup>
              <InputGroupAddon>
                <InputGroupText>https://</InputGroupText>
              </InputGroupAddon>
              <InputGroupInput id="website-input" placeholder="example.com" />
              <InputGroupAddon align="inline-end">
                <ExternalLinkIcon />
              </InputGroupAddon>
            </InputGroup>
          </Field>
          <Field>
            <FieldLabel htmlFor="feedback-textarea">
              Feedback & Comments
            </FieldLabel>
            <InputGroup>
              <InputGroupTextarea
                id="feedback-textarea"
                placeholder="Share your thoughts..."
                className="min-h-[100px]"
              />
              <InputGroupAddon align="block-end">
                <InputGroupText>0/500 characters</InputGroupText>
              </InputGroupAddon>
            </InputGroup>
          </Field>
        </FieldGroup>
      </CardContent>
      <CardFooter className="justify-end gap-2">
        <Button variant="outline">Cancel</Button>
        <Button>Submit</Button>
      </CardFooter>
    </Card>
  )
}

Domain

Subdomains

Functions

Dependencies

  • button
  • card
  • field
  • input
  • input-group
  • lucide-react

Source

Frequently Asked Questions

What does input-group-in-card.tsx do?
input-group-in-card.tsx is a source file in the ui codebase, written in tsx. It belongs to the DocumentationAtlas domain, ContentSourcing subdomain.
What functions are defined in input-group-in-card.tsx?
input-group-in-card.tsx defines 1 function(s): InputGroupInCard.
What does input-group-in-card.tsx depend on?
input-group-in-card.tsx imports 6 module(s): button, card, field, input, input-group, lucide-react.
Where is input-group-in-card.tsx in the architecture?
input-group-in-card.tsx is located at apps/v4/examples/radix/input-group-in-card.tsx (domain: DocumentationAtlas, subdomain: ContentSourcing, directory: apps/v4/examples/radix).

Analyze Your Own Codebase

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

Try Supermodel Free