# Layout & Structure
> Page layouts, cards, tabs, and structural components.
*Canonical: https://makerkit.dev/docs/tanstack-drizzle/ui-components/layout-and-structure*
---
Layout components for organizing page structure, content sections, and collapsible areas.
## Card
Container component for grouping related content.
```typescript
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, CardAction } from '@kit/ui/card';
```
```tsx
Card Title
Card description text
Card content goes here
```
### With Action Button
```tsx
Settings
Manage your preferences
Content here
```
### Small Size
```tsx
Compact card
```
## Page
Application page layout with header, navigation, and body sections.
```typescript
import { Page, PageHeader, PageTitle, PageDescription, PageBody, PageNavigation, PageMobileNavigation, PageHeaderActions } from '@kit/ui/page';
```
```tsx
Dashboard
Overview of your account
{/* Page content */}
```
## Sidebar
Collapsible sidebar navigation with built-in state management and keyboard shortcuts.
```typescript
import {
Sidebar,
SidebarProvider,
SidebarContent,
SidebarGroup,
SidebarGroupLabel,
SidebarMenu,
SidebarMenuItem,
SidebarMenuButton,
SidebarTrigger,
useSidebar,
} from '@kit/ui/sidebar';
```
```tsx
Navigation
}>
Dashboard
{/* Page content */}
```
### useSidebar Hook
Access sidebar state and controls from any component within the provider:
```tsx
import { useSidebar } from '@kit/ui/sidebar';
function MyComponent() {
const {
state, // 'expanded' | 'collapsed'
open, // boolean - desktop open state
setOpen, // (open: boolean) => void
openMobile, // boolean - mobile open state
setOpenMobile,// (open: boolean) => void
isMobile, // boolean - is mobile viewport
toggleSidebar,// () => void - toggle open/closed
} = useSidebar();
return (
);
}
```
### Keyboard Shortcut
The sidebar includes a built-in keyboard shortcut:
| Shortcut | Action |
|----------|--------|
| `Cmd/Ctrl + B` | Toggle sidebar open/closed |
### Sidebar Variants
```tsx
{/* Default sidebar */}
...
{/* Floating sidebar with shadow */}
...
{/* Inset sidebar */}
...
```
### Side Position
```tsx
{/* Left side (default) */}
...
{/* Right side */}
...
```
### Collapsible Behavior
```tsx
{/* Slides off-screen when collapsed */}
...
{/* Shows only icons when collapsed */}
...
{/* Not collapsible */}
...
```
### Configuration
The sidebar uses CSS variables for sizing:
| Variable | Default | Description |
|----------|---------|-------------|
| `--sidebar-width` | `16rem` | Desktop width |
| `--sidebar-width-mobile` | `18rem` | Mobile width |
| `--sidebar-width-icon` | `3rem` | Icon-only width |
State is persisted to a cookie (`sidebar_state`) for 7 days.
## Tabs
Tabbed content interface.
```typescript
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@kit/ui/tabs';
```
```tsx
Tab 1
Tab 2
Tab 3
Content for tab 1
Content for tab 2
Content for tab 3
```
### Line Variant
```tsx
Overview
Settings
Overview content
Settings content
```
### Vertical Orientation
```tsx
Profile
Account
Profile settings
Account settings
```
## Accordion
Collapsible content sections.
```typescript
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@kit/ui/accordion';
```
```tsx
Section 1
Content for section 1
Section 2
Content for section 2
```
### Multiple Open
Single-open is the default. Pass `multiple` to allow several items open at once. `value`/`defaultValue` are arrays.
```tsx
{/* Multiple items can be open simultaneously */}
```
## Collapsible
Toggle visibility of content.
```typescript
import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@kit/ui/collapsible';
```
```tsx
Hidden content revealed on toggle
```
## Scroll Area
Custom scrollbar container.
```typescript
import { ScrollArea } from '@kit/ui/scroll-area';
```
```tsx
{/* Long content that needs scrolling */}
```
## Aspect Ratio
Maintain aspect ratio for content.
```typescript
import { AspectRatio } from '@kit/ui/aspect-ratio';
```
```tsx
```
---
**Next:** [Navigation →](./navigation)