Docs·Split Flap Display

Split Flap Display

A premium split-flap display component inspired by vintage airport departure boards and retro mechanical displays. Features realistic flip animations, staggered character reveals, and configurable indicator strips.

Installation

pnpm dlx shadcn@latest add @componentry/split-flap-display

Usage

import { SplitFlapDisplay } from "@/components/ui/split-flap-display"

<SplitFlapDisplay
  text="HELLO WORLD"
  columns={14}
  size="lg"
/>

API Reference

PropertyTypeDefault
text

Simple text to display in a single row.

string—
rows

Array of { label, value } objects for a multi-row dashboard board.

SplitFlapRow[]—
columns

Total number of character cells per row.

number14
size

Size variant for the cells.

"sm" | "md" | "lg""md"
accentColor

Color of the side indicator strips.

string"#22c55e"
showIndicators

Whether to show the colored indicator strips on each row.

booleantrue
staggerDelay

Delay in ms between each character starting its flip animation.

number30
flipSpeed

Speed in ms per character flip step.

number35
className

Additional CSS classes for the outer container.

string—

View source

Click the icon in the preview panel to browse source for each variant.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Need a custom component?

I build bespoke UI components & websites tailored to your brand.

DM me on X