Side Panel

A flexible side panel component to place content on either side of the page.

1<Flex style={{ gap: "24px", flexWrap: "wrap" }}>
2  <SidePanel side="right">
3    <SidePanel.Header
4      title="Right Side Panel"
5      icon={<Avatar fallback="A" />}
6      description="This is a description."
7      actions={[<Button>Action</Button>]}
8    />
9    <SidePanel.Section>
10      <List>
11        <List.Header>User Information</List.Header>
12        <List.Item align="center">
13          <List.Label style={{ minWidth: "88px" }}>Status</List.Label>
14          <List.Value>Active</List.Value>
15        </List.Item>

Anatomy

Import and assemble the component:

1import { SidePanel } from "@raystack/apsara";
2

3<SidePanel>
4  <SidePanel.Header />
5</SidePanel>

Usage

A panel that holds content beside the page. Pick the side it sits on.

Basic usage

A panel with a header and content. side puts it on the left or right of the layout.

1<SidePanel side="right">
2  <SidePanel.Header title="Right Side Panel" />
3  <SidePanel.Section>
4    <List>
5      <List.Header>User Information</List.Header>
6      <List.Item align="center">
7        <List.Label style={{ minWidth: "88px" }}>Status</List.Label>
8        <List.Value>Active</List.Value>
9      </List.Item>
10    </List>
11  </SidePanel.Section>
12</SidePanel>

Position

left or right. Match it to the side the panel relates to, so it opens next to the content it acts on.

1<SidePanel side="right">
2  <SidePanel.Header title="Right Side Panel" />
3  <SidePanel.Section>
4    <List>
5      <List.Header>User Information</List.Header>
6      <List.Item align="center">
7        <List.Label style={{ minWidth: "88px" }}>Status</List.Label>
8        <List.Value>Active</List.Value>
9      </List.Item>
10    </List>
11  </SidePanel.Section>
12</SidePanel>

API Reference

A root and its header.

Root

Customize the SidePanel appearance with these configuration options.

The SidePanel component is composed of several parts, each with their own props

Prop

Type

Header

Renders the panel header section.

Prop

Type

Slots

Every rendered part carries a stable data-slot attribute for styling and testing:

SlotElement
side-panelThe root <aside>
side-panel-headerSidePanel.Header container
side-panel-header-contentHeader row wrapping title and actions
side-panel-title-groupIcon + title group
side-panel-titleHeader title text
side-panel-actionsHeader actions group
side-panel-descriptionHeader description text (when description is set)
side-panel-sectionSidePanel.Section container

Accessibility

  • Renders as a native <aside> — assistive tech announces it as the complementary landmark automatically.
  • SidePanel.Header renders the title as a semantic <h2> and assigns it an auto-generated id (override via titleId). Pair it with aria-labelledby on the <aside> to label the landmark.
  • Supports keyboard navigation and focus management of nested controls.