Sidepanel

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 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>

API Reference

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

Examples

Basic Usage

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 minWidth="88px">Status</List.Label>
8        <List.Value>Active</List.Value>
9      </List.Item>
10    </List>
11  </SidePanel.Section>
12</SidePanel>

Position

The SidePanel can be positioned on either the left or right side of the screen.

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 minWidth="88px">Status</List.Label>
8        <List.Value>Active</List.Value>
9      </List.Item>
10    </List>
11  </SidePanel.Section>
12</SidePanel>

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.