SidepanelbetaBETA
A flexible side panel component to place content on either side of the page.
<Flex style={{ gap: "24px", flexWrap: "wrap" }}>
<SidePanel side="right">
<SidePanel.Header
title="Right Side Panel"
icon={<Avatar fallback="A" />}
description="This is a description."
actions={[<Button>Action</Button>]}
/>
<SidePanel.Section>
<List.Root>
<List.Header>User Information</List.Header>
<List.Item align="center">
<List.Label minWidth="88px">Status</List.Label>
<List.Value>Active</List.Value>
</List.Item>
<List.Item align="center">
<List.Label minWidth="88px">Type</List.Label>
<List.Value>Premium Account</List.Value>
</List.Item>
<List.Item align="center">
<List.Label minWidth="88px">Created</List.Label>
<List.Value>April 24, 2024</List.Value>
</List.Item>
</List.Root>
</SidePanel.Section>
<SidePanel.Section>
<List.Root>
<List.Header>User Information</List.Header>
<List.Item align="center">
<List.Label minWidth="88px">Status</List.Label>
<List.Value>Active</List.Value>
</List.Item>
<List.Item align="center">
<List.Label minWidth="88px">Type</List.Label>
<List.Value>Premium Account</List.Value>
</List.Item>
<List.Item align="center">
<List.Label minWidth="88px">Created</List.Label>
<List.Value>April 24, 2024</List.Value>
</List.Item>
</List.Root>
</SidePanel.Section>
</SidePanel>
</Flex>Usage
The SidePanel component provides a way to show data in the side of the page.
import { SidePanel } from "@raystack/apsara/v1";
<SidePanel side="right">
<SidePanel.Header title="Right Side Panel" />
<SidePanel.Section>{/* Your content here */}</SidePanel.Section>
</SidePanel>;SidePanel Props
Customize the SidePanel appearance with these configuration options.
The SidePanel component is composed of several parts, each with their own props
| Prop | Type | Default |
|---|---|---|
side | "left" | "right" | "left" |
children | ReactNode | - |
className | string | - |
SidePanel.Header
| Prop | Type | Default |
|---|---|---|
title | string | - |
description | string | - |
icon | ReactNode | - |
actions | ReactNode[] | - |