TabsDemo() — ui Function Reference

Architecture documentation for the TabsDemo() function in tabs-demo.tsx from the ui codebase.

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ TabsDemo() — ui Function Reference

Dependency Diagram

graph TD
  19866a5f_4ddd_b9c4_b1ad_c38c657d0f77["TabsDemo()"]
  0821659c_d924_b02a_8a62_1470fed44400["tabs-demo.tsx"]
  19866a5f_4ddd_b9c4_b1ad_c38c657d0f77 -->|defined in| 0821659c_d924_b02a_8a62_1470fed44400
  style 19866a5f_4ddd_b9c4_b1ad_c38c657d0f77 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

deprecated/www/registry/default/internal/sink/components/tabs-demo.tsx lines 19–74

export function TabsDemo() {
  return (
    <Tabs defaultValue="account" className="w-[400px]">
      <TabsList className="grid w-full grid-cols-2">
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="password">Password</TabsTrigger>
      </TabsList>
      <TabsContent value="account">
        <Card>
          <CardHeader>
            <CardTitle>Account</CardTitle>
            <CardDescription>
              Make changes to your account here. Click save when you're done.
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-2">
            <div className="space-y-1">
              <Label htmlFor="name">Name</Label>
              <Input id="name" defaultValue="Pedro Duarte" />
            </div>
            <div className="space-y-1">
              <Label htmlFor="username">Username</Label>
              <Input id="username" defaultValue="@peduarte" />
            </div>
          </CardContent>
          <CardFooter>
            <Button>Save changes</Button>
          </CardFooter>
        </Card>
      </TabsContent>
      <TabsContent value="password">
        <Card>
          <CardHeader>
            <CardTitle>Password</CardTitle>
            <CardDescription>
              Change your password here. After saving, you'll be logged out.
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-2">
            <div className="space-y-1">
              <Label htmlFor="current">Current password</Label>
              <Input id="current" type="password" />
            </div>
            <div className="space-y-1">
              <Label htmlFor="new">New password</Label>
              <Input id="new" type="password" />
            </div>
          </CardContent>
          <CardFooter>
            <Button>Save password</Button>
          </CardFooter>
        </Card>
      </TabsContent>
    </Tabs>
  )
}