Layout & Structure

Page layouts, cards, tabs, and structural components.

Layout components for organizing page structure, content sections, and collapsible areas.

Card

Container component for grouping related content.

import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, CardAction } from '@kit/ui/card';

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card description text</CardDescription>
  </CardHeader>
  <CardContent>
    Card content goes here
  </CardContent>
  <CardFooter>
    <Button>Action</Button>
  </CardFooter>
</Card>

With Action Button

<Card>
  <CardHeader>
    <CardTitle>Settings</CardTitle>
    <CardDescription>Manage your preferences</CardDescription>
    <CardAction>
      <Button variant="ghost" size="icon">
        <Settings className="h-4 w-4" />
      </Button>
    </CardAction>
  </CardHeader>
  <CardContent>
    Content here
  </CardContent>
</Card>

Small Size

<Card size="sm">
  <CardContent>Compact card</CardContent>
</Card>

Page

Application page layout with header, navigation, and body sections.

import { Page, PageHeader, PageTitle, PageDescription, PageBody, PageNavigation, PageMobileNavigation, PageHeaderActions } from '@kit/ui/page';

<Page>
  <PageNavigation>
    <Sidebar />
  </PageNavigation>
  <PageMobileNavigation>
    <MobileNav />
  </PageMobileNavigation>
  <PageBody>
    <PageHeader>
      <div>
        <PageTitle>Dashboard</PageTitle>
        <PageDescription>Overview of your account</PageDescription>
      </div>
      <PageHeaderActions>
        <Button>New Item</Button>
      </PageHeaderActions>
    </PageHeader>
    {/* Page content */}
  </PageBody>
</Page>

Collapsible sidebar navigation.

import { Sidebar, SidebarContent, SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuItem, SidebarMenuButton, SidebarTrigger } from '@kit/ui/sidebar';

<Sidebar>
  <SidebarContent>
    <SidebarGroup>
      <SidebarGroupLabel>Navigation</SidebarGroupLabel>
      <SidebarMenu>
        <SidebarMenuItem>
          <SidebarMenuButton render={<Link href="/dashboard" />}>
            <Home className="h-4 w-4" />
            Dashboard
          </SidebarMenuButton>
        </SidebarMenuItem>
      </SidebarMenu>
    </SidebarGroup>
  </SidebarContent>
</Sidebar>

Tabs

Tabbed content interface.

import { Tabs, TabsList, TabsTrigger, TabsContent } from '@kit/ui/tabs';

<Tabs defaultValue="tab1">
  <TabsList>
    <TabsTrigger value="tab1">Tab 1</TabsTrigger>
    <TabsTrigger value="tab2">Tab 2</TabsTrigger>
    <TabsTrigger value="tab3">Tab 3</TabsTrigger>
  </TabsList>
  <TabsContent value="tab1">Content for tab 1</TabsContent>
  <TabsContent value="tab2">Content for tab 2</TabsContent>
  <TabsContent value="tab3">Content for tab 3</TabsContent>
</Tabs>

Line Variant

<Tabs defaultValue="tab1">
  <TabsList variant="line">
    <TabsTrigger value="tab1">Overview</TabsTrigger>
    <TabsTrigger value="tab2">Settings</TabsTrigger>
  </TabsList>
  <TabsContent value="tab1">Overview content</TabsContent>
  <TabsContent value="tab2">Settings content</TabsContent>
</Tabs>

Vertical Orientation

<Tabs defaultValue="tab1" orientation="vertical">
  <TabsList>
    <TabsTrigger value="tab1">Profile</TabsTrigger>
    <TabsTrigger value="tab2">Account</TabsTrigger>
  </TabsList>
  <TabsContent value="tab1">Profile settings</TabsContent>
  <TabsContent value="tab2">Account settings</TabsContent>
</Tabs>

Accordion

Collapsible content sections.

import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@kit/ui/accordion';

<Accordion type="single" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>Section 1</AccordionTrigger>
    <AccordionContent>
      Content for section 1
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>Section 2</AccordionTrigger>
    <AccordionContent>
      Content for section 2
    </AccordionContent>
  </AccordionItem>
</Accordion>

Multiple Open

<Accordion type="multiple">
  {/* Multiple items can be open simultaneously */}
</Accordion>

Collapsible

Toggle visibility of content.

import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@kit/ui/collapsible';

<Collapsible>
  <CollapsibleTrigger>
    <Button variant="ghost">
      Toggle Content
      <ChevronDown className="h-4 w-4" />
    </Button>
  </CollapsibleTrigger>
  <CollapsibleContent>
    Hidden content revealed on toggle
  </CollapsibleContent>
</Collapsible>

Scroll Area

Custom scrollbar container.

import { ScrollArea } from '@kit/ui/scroll-area';

<ScrollArea className="h-72 w-48">
  <div className="p-4">
    {/* Long content that needs scrolling */}
  </div>
</ScrollArea>

Aspect Ratio

Maintain aspect ratio for content.

import { AspectRatio } from '@kit/ui/aspect-ratio';

<AspectRatio ratio={16 / 9}>
  <img
    src="/image.jpg"
    alt="Image"
    className="h-full w-full object-cover"
  />
</AspectRatio>

Next: Navigation →