# Sidebar: Right side

> Set `side="right"` and place the sidebar after `SidebarInset`. The rail and the mobile sheet follow the side.

Example: https://hextaui.com/docs/sidebar/examples/right
Component docs: https://hextaui.com/docs/sidebar.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/sidebar-right.json
```

This adds `components/examples/sidebar/right.tsx` with the Sidebar component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/sidebar/right.tsx"
import { IconAt, IconBell, IconMessage, IconUsers } from "@tabler/icons-react"

import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarInset,
  SidebarMenu,
  SidebarMenuBadge,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
  SidebarRail,
  SidebarTrigger,
} from "@/components/ui/sidebar"

const items = [
  { title: "Mentions", icon: IconAt, count: 3 },
  { title: "Comments", icon: IconMessage, count: 12 },
  { title: "Reminders", icon: IconBell, count: 0 },
  { title: "Followers", icon: IconUsers, count: 128 },
]

export function SidebarRight() {
  return (
    <SidebarProvider className="h-112 min-h-0">
      <SidebarInset>
        <header className="flex h-14 items-center justify-end px-4">
          <SidebarTrigger className="-me-1" />
        </header>
      </SidebarInset>
      <Sidebar side="right">
        <SidebarContent>
          <SidebarGroup>
            <SidebarGroupLabel>Activity</SidebarGroupLabel>
            <SidebarGroupContent>
              <SidebarMenu>
                {items.map((item) => (
                  <SidebarMenuItem key={item.title}>
                    <SidebarMenuButton>
                      <item.icon />
                      <span>{item.title}</span>
                    </SidebarMenuButton>
                    {item.count > 0 && (
                      <SidebarMenuBadge>{item.count}</SidebarMenuBadge>
                    )}
                  </SidebarMenuItem>
                ))}
              </SidebarMenu>
            </SidebarGroupContent>
          </SidebarGroup>
        </SidebarContent>
        <SidebarRail />
      </Sidebar>
    </SidebarProvider>
  )
}
```

## Props in this example

### Sidebar

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `side` | `"left" \| "right"` | `"left"` |  |

## More Sidebar examples

- [Variants](https://hextaui.com/docs/sidebar/examples/variants.md)
- [Collapsible](https://hextaui.com/docs/sidebar/examples/collapsible.md)
- [Collapsible groups and submenus](https://hextaui.com/docs/sidebar/examples/submenus.md)
- [Under a header](https://hextaui.com/docs/sidebar/examples/header.md)
- [Controlled](https://hextaui.com/docs/sidebar/examples/controlled.md)
- [Loading](https://hextaui.com/docs/sidebar/examples/skeleton.md)
- [Right to left](https://hextaui.com/docs/sidebar/examples/rtl.md)