ui Architecture Docs
Home / File/ team-members.tsx — ui Source File

team-members.tsx — ui Source File

Architecture documentation for team-members.tsx, a tsx file in the ui codebase. 6 imports, 1 dependents.

File tsx ComponentRegistry UIPrimitives 6 imports 1 dependents 1 functions

Entity Profile

Dependency Diagram

graph LR
  6b149757_2840_6720_4acd_cff6088a8fcf["team-members.tsx"]
  d39cd1e4_1b2d_9aa2_1d29_fd0b4bfb61c3["lucide-react"]
  6b149757_2840_6720_4acd_cff6088a8fcf --> d39cd1e4_1b2d_9aa2_1d29_fd0b4bfb61c3
  9a088841_0fc9_5075_043e_b2a2a1f69fe2["avatar"]
  6b149757_2840_6720_4acd_cff6088a8fcf --> 9a088841_0fc9_5075_043e_b2a2a1f69fe2
  aa2f3ec6_f291_3763_88ec_65a3f5ad5939["button"]
  6b149757_2840_6720_4acd_cff6088a8fcf --> aa2f3ec6_f291_3763_88ec_65a3f5ad5939
  95a7752f_4b97_5bde_5d7d_fca03536ac35["card"]
  6b149757_2840_6720_4acd_cff6088a8fcf --> 95a7752f_4b97_5bde_5d7d_fca03536ac35
  64c05bed_da32_06a4_3b53_12b3830eb50b["command"]
  6b149757_2840_6720_4acd_cff6088a8fcf --> 64c05bed_da32_06a4_3b53_12b3830eb50b
  e33b0d79_0534_28ec_a112_ac16ee736e09["popover"]
  6b149757_2840_6720_4acd_cff6088a8fcf --> e33b0d79_0534_28ec_a112_ac16ee736e09
  72f1b829_240b_a010_b4ad_dfef30ded6bf["page.tsx"]
  72f1b829_240b_a010_b4ad_dfef30ded6bf --> 6b149757_2840_6720_4acd_cff6088a8fcf
  style 6b149757_2840_6720_4acd_cff6088a8fcf fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import { ChevronDown } from "lucide-react"

import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@/registry/new-york/ui/avatar"
import { Button } from "@/registry/new-york/ui/button"
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/registry/new-york/ui/card"
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/registry/new-york/ui/command"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/registry/new-york/ui/popover"

export function DemoTeamMembers() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Team Members</CardTitle>
        <CardDescription>
          Invite your team members to collaborate.
        </CardDescription>
      </CardHeader>
      <CardContent className="grid gap-6">
        <div className="flex items-center justify-between space-x-4">
          <div className="flex items-center space-x-4">
            <Avatar>
              <AvatarImage src="/avatars/01.png" />
              <AvatarFallback>OM</AvatarFallback>
            </Avatar>
            <div>
              <p className="text-sm font-medium leading-none">Sofia Davis</p>
              <p className="text-sm text-muted-foreground">m@example.com</p>
            </div>
          </div>
          <Popover>
            <PopoverTrigger asChild>
              <Button variant="outline" className="ml-auto">
                Owner <ChevronDown className="text-muted-foreground" />
              </Button>
            </PopoverTrigger>
            <PopoverContent className="p-0" align="end">
              <Command>
                <CommandInput placeholder="Select new role..." />
                <CommandList>
// ... (90 more lines)

Domain

Subdomains

Functions

Dependencies

  • avatar
  • button
  • card
  • command
  • lucide-react
  • popover

Imported By

Source

Frequently Asked Questions

What does team-members.tsx do?
team-members.tsx is a source file in the ui codebase, written in tsx. It belongs to the ComponentRegistry domain, UIPrimitives subdomain.
What functions are defined in team-members.tsx?
team-members.tsx defines 1 function(s): DemoTeamMembers.
What does team-members.tsx depend on?
team-members.tsx imports 6 module(s): avatar, button, card, command, lucide-react, popover.
What files import team-members.tsx?
team-members.tsx is imported by 1 file(s): page.tsx.
Where is team-members.tsx in the architecture?
team-members.tsx is located at deprecated/www/app/(app)/examples/cards/components/team-members.tsx (domain: ComponentRegistry, subdomain: UIPrimitives, directory: deprecated/www/app/(app)/examples/cards/components).

Analyze Your Own Codebase

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

Try Supermodel Free