@catto/ui

@catto/ui

The component library powering RLeaguez

Built with React, Tailwind CSS, and TypeScript. Coming soon as a standalone npm package.

44+

Components

12

Languages

Built-in

Dark Mode

Haptics

Mobile-First

$ npm install @catto/ui (coming soon)

Colors

Our brand palette centers on Orange and Navy Blue, with supporting neutrals for text and backgrounds.

Brand Colors

Orange 500

#f97316

Orange 600

#ea580c

Navy Blue 600

#2563eb

Slate 800

#1e293b

RZ Icon Oranges (App Icon & Splash)

Tested oranges for app icon against navy gradient background. #FF910C pops strongest.

RZ Orange

#FF910C

Current

Dark Orange

#FF8C00

Tested

Pure Orange

#FFA500

CSS Orange

iOS Orange

#FF9500

Apple HIG

Bright Orange

#FF7F00

Alternative

Preview against icon navy gradient:

RzRzRzRzRz
#FF910C#FF8C00#FFA500#FF9500#FF7F00

RZ Icon Stroke/Outline Color:

Stroke

#B35A00

Text Colors (Never use pure white/black)

Light Mode

Primary: text-gray-900

Secondary: text-gray-600

Muted: text-gray-500

Dark Mode

Primary: text-slate-50

Secondary: text-gray-300

Muted: text-gray-400

Status Colors

Consistent status indicators across the app. Note: No purple per CLAUDE.md brand guidelines.

Success

green-500

Warning

orange-500

Danger

red-500

Info

blue-500

Neutral

gray-500

Typography

Consistent font scales and text styles across the application.

Font Families — Google Fonts

Montserrat

Primary — Body Font

Used for all body text, buttons, labels, and UI elements. Set as the default font via --font-sans and font-montserrat.

100

The quick brown fox jumps over the lazy dog

Thin
200

The quick brown fox jumps over the lazy dog

Extra Light
300

The quick brown fox jumps over the lazy dog

Light
400

The quick brown fox jumps over the lazy dog

Regular
500

The quick brown fox jumps over the lazy dog

Medium
700

The quick brown fox jumps over the lazy dog

Bold

Urbanist

Secondary — Display Font

Used for display headings, hero text, and decorative typography. Apply with font-urbanist.

100

The quick brown fox jumps over the lazy dog

Thin
200

The quick brown fox jumps over the lazy dog

Extra Light
300

The quick brown fox jumps over the lazy dog

Light
400

The quick brown fox jumps over the lazy dog

Regular
500

The quick brown fox jumps over the lazy dog

Medium
700

The quick brown fox jumps over the lazy dog

Bold

Headings

Heading 1 - 4xl Bold

Heading 2 - 3xl Bold

Heading 3 - 2xl Semibold

Heading 4 - xl Semibold

Heading 5 - lg Medium
Heading 6 - base Medium

Body Text

Large body text (text-lg) - Use for introductions and emphasis.

Base body text (text-base) - Default for most content. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Small text (text-sm) - Use for captions, labels, and secondary information.

Extra small (text-xs) - Use sparingly for fine print.

Text Capitalization Guidelines

ElementStyleExample
Page titlesTitle Case"Sign In to RLeaguez"
Button labelsTitle Case"Create Team"
PlaceholdersSentence case"Enter first name"
LabelsSentence case"Email address:"

Buttons

ButtonCatto provides 11 variants for different use cases and contexts.

Button Variants

Button Sizes

Button States

Buttons with Icons

Button Placement (Industry Standard)

Cancel/Secondary actions go LEFT, Confirm/Primary actions go RIGHT. This follows macOS, Windows, and Material Design conventions.

Cards

CardCatto is our primary content container, mobile-friendly and highly configurable.

Card Variants

Default Card

Standard card with border

Card content goes here.

Primary Card

Blue-tinted background.

Semantic Card Variants

Success

Operation completed successfully.

Warning

Please review before proceeding.

Danger

This action cannot be undone.

Card with Icon and Footer

Featured Card

Cards can include icons and footer sections

This card demonstrates the icon and footer props.

Card Width Options

Width options: xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl, full

Small Card (sm)

Compact width.

Medium Card (md)

Medium width.

Large Card (lg)

Larger width for more content.

Collapsible Card

Click to Collapse

This card can be collapsed

This content can be hidden by clicking the header.

Form Controls

Input components for building forms with validation, labels, and accessibility support.

InputCatto - Variants

Outlined (default)

Filled

Minimal

InputCatto - Sizes

InputCatto - States

Choose a unique username

SelectCatto

Selected: (none)

CheckboxCatto

I agree to the terms and conditions
Always checked
Unchecked
Disabled checkbox

MultiSelectCatto

Selected: (none)

OtpInputCatto

Feedback Components

Components for communicating status, messages, and empty states to users.

EmptyStateCatto - Icon Types

Available icons: teams, players, tournaments, venues, matches, members, leagues, search, error, default

teams

players

tournaments

venues

matches

EmptyStateCatto - Variants

Default Variant

Orange-accented gradient background.

Primary Variant

Navy blue styled empty state.

No Results

Try adjusting your search criteria.

Error State

Something went wrong. Please try again.

Subtle Variant

Transparent background, minimal styling.

EmptyStateCatto - With Action Button

No Teams Yet

Create your first team to get started organizing your league.

ToastCatto

Variants: primary, success, warning, error, info, midnightEmber

primarysuccesswarningerrorinfo

MellowModalCatto

Tabs and Toggles

Components for tabbed navigation and binary/multi-option toggles.

TabsCatto

Browse upcoming tournaments and register your teams.

TabsCatto - Variants

Pills variant

Showing all items

Bordered variant

Overview content

ButtonTogglePillCatto

Current state: Left (Dark/Moon)

ViewToggleCatto

Default variant

Pill variant

Minimal variant

Current view: list

Data Display

Components for presenting data: badges, avatars, ratings, tooltips, and tables.

BadgeCatto - Variants

DefaultPrimaryActivePendingFailedNewOutline

BadgeCatto - Sizes, Icons, and Features

Sizes

XSSMMDLG

With Icons

CompletedWarningErrorInfo

Rounded Count + Dot Indicator

51299+LiveOffline

AvatarCatto - Sizes

CC

xs

AR

sm

JC

md

SP

lg

ML

xl

CB

2xl

AvatarCatto - Status, Shapes, and Ring

Status Indicators

OU

online

AU

away

BU

busy

OU

offline

Shapes

CS

circle

RS

rounded

SS

square

With Ring

OR
BR
GR

RatingStarsCatto - Display

Display Modes

Sizes

xs
sm
md
lg
xl

Color Variants

yellow
orange
gold

RatingStarsCatto - Interactive

Click stars to rate (full-star precision)

3.0

Current rating: 3 / 5

TooltipCatto - Variants

TooltipCatto - Positions

TableCatto - Sortable Data Table

Alex RiveraThunderBasketball
Jordan ChenStrikersSoccer
Sam PatelAcesTennis
Morgan LeeBlazeVolleyball
Casey BrooksTitansPickleball

Loading & Skeletons

Loading spinners, inline indicators, and skeleton placeholders for smooth perceived performance.

PageLoadingCatto

The signature RLeaguez page-level loading spinner with the orange bouncing circle. Click a button to preview it in a contained area.

Click a button above to preview the loading spinner here

InlineLoadingCatto

Sizes (horizontal layout)

sm

Loading...

md

Loading...

lg

Loading...

Vertical Layout with Rz Logo

Rz

Fetching tournament results...

SkeletonBaseCatto - Base Skeleton

Width and Height Presets

full / xs
3/4 / sm
1/2 / md
1/4 / lg
200px / xl

Rounded Variants

none

sm

md

lg

full

Content Placeholder Example

CardSkeletonCatto

Default

With Icon + Footer

Compact

TableSkeletonCatto

Default (5 rows, 4 columns, with filter and pagination)

Minimal (no filter, no pagination)

Dividers and Section Titles

Decorative divider components and section title elements for visual separation and content structure.

HR Divider Components (All 11 Variants)

HRDividerCatto

Basic dashed divider line

HRCircleCatto

Circle-decorated divider element

HRTriangleCatto

Triangle-decorated divider element

HRAnimatedLineCatto

Animated gradient line divider

HRSquareCatto

Single square divider element

HRSquaresCatto

Multiple squares divider (configurable count, size, gap)

HRPartyPulseCatto

Party/pulse animated divider with color cycling

HRPulseDividerCatto

Pulsing divider with orange color

HRSubtleCatto

Subtle/minimal divider with reduced opacity

HRWideCatto

Full-width divider with thicker border

HRHypnoCatto

Spinning hypnotic circle divider

HRSquaresCatto - Configuration

Default (10 squares)

5 squares, larger size, more gap

20 squares, small size, tight gap

3 squares, extra large

HRDividerCatto - Width Options

width="w-24"

Default (w-48)

width="w-64"

width="w-full"

SectionTitleCatto

Basic title (centered by default)

Section Title

With subtitle (fade-in animation)

Featured Tournaments

Browse upcoming tournaments and register your team

Left-aligned via className

Left-Aligned Title

Aligned to the left using className override

Right-aligned via className

Right-Aligned Title

Aligned to the right using className override

SectionTitleCatto + Dividers (Composition)

Our Teams

Meet the full roster

Upcoming Schedule

League Standings

Updated weekly

@catto/ui — The component library powering RLeaguez

Built with React, Tailwind CSS, and TypeScript

Back to Home