ClawCrazy UI Showcase

Design system reference for streamlining UI across projects

Typography

Heading 1

text-5xl font-bold

Heading 2

text-4xl font-bold

Heading 3

text-3xl font-bold

Heading 4

text-2xl font-bold

Heading 5

text-xl font-bold

Heading 6

text-lg font-bold

Regular paragraph text. This is how body text appears.

text-base

Small text for captions and secondary information.

text-sm

Bold text

Italic text

Underlined text

Color Palette

Primary

#3f51b5

Sample text

Secondary

#5e62cc

Sample text

Accent

#ff448f

Sample text

Base 100

#1a1b35

Base 200

#181933

Base 300

#151729

Success

#10b981

Sample text

Warning

#f59e0b

Sample text

Error

#ff4350

Sample text

Info

#3b82f6

Sample text

Neutral

#4d4f8c

Sample text

Buttons

Variants

Sizes

States

Shapes

Form Elements

Input Fields

Input Sizes

Other Elements

Checkboxes
Radio Buttons

Modals

Cards

Basic Card

This is a simple card with just text content.

Card with Image

This card includes an image placeholder at the top.

Card with Actions

This card includes action buttons at the bottom.

Badges & Alerts

Badges

Primary Secondary Accent Neutral Success Warning Error Info Outline

Badge Sizes

XS SM MD LG

Alerts

Backgrounds

Base 100 Background

#1a1b35

Base 200 Background

#181933

Base 300 Background

#151729

Gradient Background

Primary to Accent

Other Components

Loading Spinners

XS
SM
MD
LG

Progress Bars

Dividers

OR
Primary Divider
Secondary Divider

Tooltips