Left Rail
Compact vertical rail for canvas modes, tool actions, and secondary navigation controls.
Preview
Switch between light and dark to inspect the embedded Storybook preview.
Installation
pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/left-rail.jsonStorybook
Explore all variants, controls, and accessibility checks in the interactive Storybook playground.
View in StorybookCode
import { forwardRef } from "react";
import type { ReactNode } from "react";
import { cn } from "../../lib/utils";
export type LeftRailProps = React.ComponentPropsWithoutRef<"aside"> & {
footer?: ReactNode;
title?: ReactNode;
};
const LeftRail = forwardRef<HTMLElement, LeftRailProps>(
({ children, className, footer, title, ...props }, ref) => (
<aside
className={cn(
"flex h-full w-[4.5rem] shrink-0 flex-col items-center gap-3 border-r border-border bg-background px-2 py-3",
className,
)}
ref={ref}
{...props}
>
{title ? (
<div className="flex min-h-9 items-center text-[11px] font-medium uppercase tracking-[0.24em] text-muted-foreground">
{title}
</div>
) : null}
<div className="flex w-full flex-1 flex-col items-center gap-2">
{children}
</div>
{footer ? (
<div className="flex w-full flex-col items-center gap-2">{footer}</div>
) : null}
</aside>
),
);
LeftRail.displayName = "LeftRail";
export { LeftRail };