ui Architecture Docs
Home / File/ tabs-demo.tsx — ui Source File

tabs-demo.tsx — ui Source File

Architecture documentation for tabs-demo.tsx, a tsx file in the ui codebase. 2 imports, 0 dependents.

File tsx DocumentationAtlas ContentSourcing 2 imports 1 functions

Entity Profile

Dependency Diagram

graph LR
  3d66eeee_d995_15cd_6dff_57d818a75ea3["tabs-demo.tsx"]
  a66f2388_87f1_5188_51e6_9a4b91cfd618["card"]
  3d66eeee_d995_15cd_6dff_57d818a75ea3 --> a66f2388_87f1_5188_51e6_9a4b91cfd618
  c0c0320c_6788_9862_3f6a_ddb9a0a1d960["tabs"]
  3d66eeee_d995_15cd_6dff_57d818a75ea3 --> c0c0320c_6788_9862_3f6a_ddb9a0a1d960
  style 3d66eeee_d995_15cd_6dff_57d818a75ea3 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/examples/base/ui/card"
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "@/examples/base/ui/tabs"

export function TabsDemo() {
  return (
    <Tabs defaultValue="overview" className="w-[400px]">
      <TabsList>
        <TabsTrigger value="overview">Overview</TabsTrigger>
        <TabsTrigger value="analytics">Analytics</TabsTrigger>
        <TabsTrigger value="reports">Reports</TabsTrigger>
        <TabsTrigger value="settings">Settings</TabsTrigger>
      </TabsList>
      <TabsContent value="overview">
        <Card>
          <CardHeader>
            <CardTitle>Overview</CardTitle>
            <CardDescription>
              View your key metrics and recent project activity. Track progress
              across all your active projects.
            </CardDescription>
          </CardHeader>
          <CardContent className="text-muted-foreground text-sm">
            You have 12 active projects and 3 pending tasks.
          </CardContent>
        </Card>
      </TabsContent>
      <TabsContent value="analytics">
        <Card>
          <CardHeader>
            <CardTitle>Analytics</CardTitle>
            <CardDescription>
              Track performance and user engagement metrics. Monitor trends and
              identify growth opportunities.
            </CardDescription>
          </CardHeader>
          <CardContent className="text-muted-foreground text-sm">
            Page views are up 25% compared to last month.
          </CardContent>
        </Card>
      </TabsContent>
      <TabsContent value="reports">
        <Card>
          <CardHeader>
            <CardTitle>Reports</CardTitle>
            <CardDescription>
              Generate and download your detailed reports. Export data in
              multiple formats for analysis.
            </CardDescription>
          </CardHeader>
          <CardContent className="text-muted-foreground text-sm">
            You have 5 reports ready and available to export.
          </CardContent>
        </Card>
      </TabsContent>
      <TabsContent value="settings">
        <Card>
          <CardHeader>
            <CardTitle>Settings</CardTitle>
            <CardDescription>
              Manage your account preferences and options. Customize your
              experience to fit your needs.
            </CardDescription>
          </CardHeader>
          <CardContent className="text-muted-foreground text-sm">
            Configure notifications, security, and themes.
          </CardContent>
        </Card>
      </TabsContent>
    </Tabs>
  )
}

Domain

Subdomains

Functions

Dependencies

  • card
  • tabs

Source

Frequently Asked Questions

What does tabs-demo.tsx do?
tabs-demo.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 tabs-demo.tsx?
tabs-demo.tsx defines 1 function(s): TabsDemo.
What does tabs-demo.tsx depend on?
tabs-demo.tsx imports 2 module(s): card, tabs.
Where is tabs-demo.tsx in the architecture?
tabs-demo.tsx is located at apps/v4/examples/base/tabs-demo.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