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
  9c682253_9625_860f_dad8_cf5b55d86fc1["input-group-in-card.tsx"]
  4544fa74_9b37_0912_c55e_f4ff161b8e83["button"]
  9c682253_9625_860f_dad8_cf5b55d86fc1 --> 4544fa74_9b37_0912_c55e_f4ff161b8e83
  a66f2388_87f1_5188_51e6_9a4b91cfd618["card"]
  9c682253_9625_860f_dad8_cf5b55d86fc1 --> a66f2388_87f1_5188_51e6_9a4b91cfd618
  e6c524b5_d047_d4f9_50b2_7f100d612cb2["field"]
  9c682253_9625_860f_dad8_cf5b55d86fc1 --> e6c524b5_d047_d4f9_50b2_7f100d612cb2
  9a309fc5_4306_d01f_08ce_72db23e48652["input"]
  9c682253_9625_860f_dad8_cf5b55d86fc1 --> 9a309fc5_4306_d01f_08ce_72db23e48652
  4a37d855_5768_bc5a_31ae_9f42eba9091a["input-group"]
  9c682253_9625_860f_dad8_cf5b55d86fc1 --> 4a37d855_5768_bc5a_31ae_9f42eba9091a
  d39cd1e4_1b2d_9aa2_1d29_fd0b4bfb61c3["lucide-react"]
  9c682253_9625_860f_dad8_cf5b55d86fc1 --> d39cd1e4_1b2d_9aa2_1d29_fd0b4bfb61c3
  style 9c682253_9625_860f_dad8_cf5b55d86fc1 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import { Button } from "@/examples/base/ui/button"
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/examples/base/ui/card"
import { Field, FieldGroup, FieldLabel } from "@/examples/base/ui/field"
import { Input } from "@/examples/base/ui/input"
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
  InputGroupText,
  InputGroupTextarea,
} from "@/examples/base/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/base/input-group-in-card.tsx (domain: DocumentationAtlas, subdomain: ContentSourcing, directory: apps/v4/examples/base).

Analyze Your Own Codebase

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

Try Supermodel Free