Componentdata0.75 KB gzipZero dependencies

Split Screen

Split layout: left content and right emphasis panel with ratio control.

Preview

Live Preview

Left content

Right panel

Installation

Tokens guide →

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

npx bigbullui add split-screen

Or install the full npm package:

npm install bigbullui

Usage

Open in StackBlitz

import { SplitScreen } from "@/components/ui/split-screen";

<SplitScreen />

Usage guidance

Use Split Screen when a ticket stub surface needs Split layout: left content and right emphasis panel with ratio control. Keep props minimal and prefer composition with sibling stubs.

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

Source code

split-screen.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 SplitScreenProps extends React.HTMLAttributes<HTMLDivElement> {
  /** sol taraf (genelde metin/form) */
  left: React.ReactNode;
  /** Right side slot (typically graphic or visual) */
  right: React.ReactNode;
  /** Right side width fraction (0 to 1) */
  rightRatio?: number;
  /** Hide right panel on mobile viewports */
  hideRightOnMobile?: boolean;
}

/** Split screen layout: left main content + right visual panel. */
export function SplitScreen({ left, right, rightRatio = 0.45, hideRightOnMobile = true, className, ...props }: SplitScreenProps) {
  const leftPct = Math.round((1 - rightRatio) * 100);
  const rightPct = Math.round(rightRatio * 100);

  return (
    <div className={cn("flex min-h-[420px] overflow-hidden rounded-lg border border-border", className)} {...props}>
      <style>{`@keyframes splitIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }`}</style>
      <div
        className={cn("flex flex-col justify-center p-8 animate-[splitIn_0.4s_ease-out_both] motion-reduce:animate-none", hideRightOnMobile && "w-full lg:w-auto")}
        style={{ flexBasis: `${leftPct}%`, flexGrow: 1 }}
      >
        {left}
      </div>
      <div
        className={cn(
          "relative border-l border-border bg-secondary/40 p-8 animate-[splitIn_0.4s_ease-out_0.15s_both] motion-reduce:animate-none",
          hideRightOnMobile && "hidden lg:flex"
        )}
        style={{ flexBasis: `${rightPct}%` }}
      >
        {right}
      </div>
    </div>
  );
}

Props

Prop	Type	Description
left	React.ReactNode	sol taraf (genelde metin/form)
right	React.ReactNode	Right side element (typically visual or graphic)
rightRatio	number	Right side width ratio (0 to 1)
hideRightOnMobile	boolean	Hide right side on mobile screens