Laughing Whaleslaughingwhales.comUI Registry

Getting Started

Terminal

Profile & Avatar

Progression

Animation

Navigation

Interactive

Components

Beautifully designed components built with Tailwind CSS. Installable via the shadcn CLI.

Terminal Chrome

macOS-style terminal window shell with traffic light buttons and optional title bar.

...

Tool Call Block

MCP tool call display with name, arguments, and result.

...

Mini Terminal Demo

Compact animated terminal card with copy-to-clipboard and pin support.

...

Terminal Demo

Full animated terminal session with typing, tool calls, thinking indicators, and memory blocks.

...

User Badge

Compact user identity display with avatar, name, and optional handle.

...

Avatar Picker

Avatar picker with DiceBear generated avatars, style pills, custom seed, and file upload.

...

Profile Editor

Profile editor card with avatar, status indicator, editable fields, and save/cancel actions.

...

Step Flow

Interactive multi-step flow visualizer with clickable step buttons and navigation.

...

Onboarding Checklist

Linear onboarding checklist with progress bar, step locking, and dismissible success state.

...

Flow Diagram

Animated architecture flow diagram with bezier-curved edges, flowing particles, and hover highlighting.

...

Welcome Banner

First-time welcome banner with greeting, progress bar, and step cards.

...

Typing Text

CSS-only typewriter animation with blinking cursor.

...

Scroll Prompt

Animated scroll-down prompt that appears when a target section is out of view.

...

Section Heading

Heading with auto-generated anchor link and click-to-copy URL.

...

Component Grid

Tic-tac-toe grid of component cards with scaled live preview thumbnails.

...

Grouped Sidebar

Grouped sidebar navigation with responsive slide-over for mobile.

...

Feature Pill

Rounded pill badge for feature labels, tags, or categories with variant colors.

...

Info Tip

Info icon with tooltip on hover (desktop) and tap toggle (mobile).

...

Collapsible Group

Accordion-style collapsible section with smooth grid-row animation.

...

Copyable Row

Click-to-copy wrapper with hover highlight and copy/check icon transition.

...

Social Card

Grid of social platform cards with inline SVG icons, platform name, description, and external link. Supports 8 named platforms with a generic link icon fallback.

...

Support Card

Grid of support cards by type: creator-code (with copy button), donation, affiliate, and merch — each with distinct icons.

...

Build Card

Character build cards with large character image, role badge, item slot grid with hover tooltips, and optional description.

...

Guide Tabs

Tabbed guide viewer with intro text, category tabs, and a responsive video card grid with 16:9 thumbnails and hover play overlay.

...

Faq Accordion

FAQ list using native HTML details/summary for progressive enhancement, with animated chevron indicator.

...

Creator Card

Grid of recommended creator cards with rounded profile image (or initials fallback), display name, handle, description, and Twitch link.

...

Perk Picker

Searchable perk selector for Dead by Daylight builds with role filters, icon previews, and slot management.

...

Page Builder

Full dashboard customization system — section reordering, variant switching, visibility toggles, column layout, preview with fixtures, shuffle, save/cancel/reset.

...

Installation

Add to your components.json:

components.json

Then install by name:

terminal