Componentnavigation0.51 KB gzipZero dependencies

Sticky Split

Two-pane frame with sticky rail.

Preview

Live Preview

Main column stub

Installation

Tokens guide →

Add to your project via CLI (zero dependencies, code you own):

npx bigbullui add sticky-split

Or install the full npm package:

npm install bigbullui

Usage

Open in StackBlitz

import { StickySplit } from "@/components/ui/sticky-split";

<StickySplit />

Usage guidance

Use Sticky Split when a ticket stub surface needs Two-pane frame with sticky rail. Keep props minimal and prefer composition with sibling stubs.

Avoid Sticky Split for long form flows or dense data grids where a dedicated layout block fits better.

Source code

sticky-split.tsx

Zero dependencies (only React + utils). Copy and paste directly into your project:

"use client";

import * as React from "react";
import { cn } from "./lib/utils";

export interface StickySplitProps extends React.HTMLAttributes<HTMLDivElement> {
  left?: React.ReactNode;
  right?: React.ReactNode;
}

/** Sticky split stub: two-pane frame with sticky side rail. */
export function StickySplit({ left, right, className, children, ...props }: StickySplitProps) {
  return (
    <div className={cn("grid w-full gap-3 sm:grid-cols-[180px_1fr]", className)} {...props}>
      <aside className="sm:sticky sm:top-2 h-fit rounded-lg border border-dashed border-border bg-card p-3">
        <span className="font-mono text-[10px] uppercase tracking-[0.15em] text-muted-foreground">Rail</span>
        <div className="mt-1 font-mono text-xs text-foreground">{left ?? "Sticky nav stub"}</div>
      </aside>
      <div className="min-w-0 rounded-lg border border-border bg-card p-3">
        {right ?? children ?? <p className="font-mono text-xs text-muted-foreground">Main column stub</p>}
      </div>
    </div>
  );
}