SidebarItem

Composable rows for channel, direct-message, and member lists.

Preview#

Navigation

Channels

Direct messages

import {
  SidebarItem,
  SidebarItemAside,
  SidebarItemChannelIcon,
  SidebarItemContent,
  SidebarItemCount,
  SidebarItemIndicator,
  SidebarItemMetaIcon,
  SidebarItemSubtitle,
  SidebarItemTitle,
} from "raft-ui";

<SidebarItem active variant="default">
  <SidebarItemChannelIcon />
  <SidebarItemContent>
    <SidebarItemTitle />
    <SidebarItemSubtitle />
  </SidebarItemContent>
  <SidebarItemAside>
    <SidebarItemIndicator />
    <SidebarItemCount />
    <SidebarItemMetaIcon />
  </SidebarItemAside>
</SidebarItem>

API#WIP

PropTypeDefaultDescription
activebooleanfalseMarks the row as active. Sets data-active for visual state; route consumers provide aria-current for the current destination.
variant"default" | "primary" | "accent""default"Selects the active treatment. Brutal maps default, primary, and accent to white, yellow, and pink; Elegant keeps its theme-owned active surface.
...propsuseRender.ComponentProps<"button">Interactive row root. Unread state is composed from explicit indicators and counts.
PropTypeDefaultDescription
...propsuseRender.ComponentProps<"span">Leading avatar or general icon slot for a row.
PropTypeDefaultDescription
...propsuseRender.ComponentProps<"span">Leading icon container. Pass the concrete icon as its child.
PropTypeDefaultDescription
stackedbooleanfalseStacks title and subtitle vertically when the row needs secondary activity copy.
...propsuseRender.ComponentProps<"span">Groups title and subtitle content.
PropTypeDefaultDescription
...propsuseRender.ComponentProps<"span">Truncating primary destination label.
PropTypeDefaultDescription
...propsuseRender.ComponentProps<"span">Truncating secondary activity copy.
PropTypeDefaultDescription
...propsuseRender.ComponentProps<"span">Low-emphasis inline metadata beside row content.
PropTypeDefaultDescription
...propsuseRender.ComponentProps<"span">Trailing layout slot for consumer-chosen metadata parts.
PropTypeDefaultDescription
...propsuseRender.ComponentProps<"span">Availability-status slot. A direct Status child uses the Sidebar theme size (sm in Brutal, xs in Elegant); consumers provide its label, state variant, and pulse behavior.
PropTypeDefaultDescription
...propsBadge propsMention or attention indicator. Supply an accessible label.
PropTypeDefaultDescription
...propsBadge propsUnread-count badge in the trailing area.
PropTypeDefaultDescription
...propsuseRender.ComponentProps<"span">Draft, muted, or other low-emphasis metadata icon.