TabsWithInputAndButton() — ui Function Reference

Architecture documentation for the TabsWithInputAndButton() function in tabs-example.tsx from the ui codebase.

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ TabsWithInputAndButton() — ui Function Reference

Dependency Diagram

graph TD
  4b0a1de1_18e6_7d99_0c35_d5cd66704f76["TabsWithInputAndButton()"]
  dd1a6104_63fe_63e2_e50f_c437e305bec0["tabs-example.tsx"]
  4b0a1de1_18e6_7d99_0c35_d5cd66704f76 -->|defined in| dd1a6104_63fe_63e2_e50f_c437e305bec0
  style 4b0a1de1_18e6_7d99_0c35_d5cd66704f76 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/base/examples/tabs-example.tsx lines 331–359

function TabsWithInputAndButton() {
  return (
    <Example title="With Input and Button" containerClassName="col-span-full">
      <Tabs defaultValue="overview" className="mx-auto w-full max-w-lg">
        <div className="flex items-center gap-4">
          <TabsList>
            <TabsTrigger value="overview">Overview</TabsTrigger>
            <TabsTrigger value="analytics">Analytics</TabsTrigger>
          </TabsList>
          <div className="ml-auto flex items-center gap-2">
            <Input placeholder="Search..." className="w-44" />
            <Button>Action</Button>
          </div>
        </div>
        <div className="style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border">
          <TabsContent value="overview">
            View your dashboard metrics and key performance indicators.
          </TabsContent>
          <TabsContent value="analytics">
            Detailed analytics and insights about your data.
          </TabsContent>
          <TabsContent value="reports">
            Generate and view custom reports.
          </TabsContent>
        </div>
      </Tabs>
    </Example>
  )
}