Pitcher UI Framework - Extended Demo

Form Elements
Use your legal name for verification
Success!
Your changes have been saved successfully.
Information
This action requires confirmation.
Warning
This action cannot be undone.
Error
Something went wrong. Please try again.
Buttons
Icon Buttons
Default Icon Buttons:
Icon Button Sizes:
Primary Icon Buttons:
Success Icon Buttons:
Danger Icon Buttons:
Outlined Icon Buttons:
Badges & Tags
Badges:
Default Success Error Warning Info 5
Tags:
Default Active Draft Inactive New
Toggles & Switches
Notifications Disabled
Notifications Enabled
Progress Indicators
Default Progress (60%)
Success (100%)
Warning (45%)
Error (30%)
Loading...
Home / Products / Current Page
Data Table
ID Name Status Owner Progress
#1001 Data tables study Active Dimitris Tomazakis
#1002 Template with advanced aspect Draft Sarah Johnson
#1003 Component library update Inactive Michael Chen
#1004 API documentation Active Emma Davis
« 1 2 3 »

Panel Title

This is a simple panel with a border. Use for grouping related content without card styling.

Layout Examples
Flex with Gap:
Item 1
Item 2
Item 3
Two Column Layout:
Wide (2/3)
Narrow (1/3)
Card with Actions

This card demonstrates footer actions with properly styled buttons.

Text Utilities

Primary Color

Success Color

Error Color

Warning Color

Gray Color

Muted Color


Small text

Extra small text

Semibold weight

Bold weight

Utility Classes Showcase
Spacing Utilities:
m-1 (margin: 0.25rem)
m-2 (margin: 0.5rem)
m-3 (margin: 0.75rem)
m-4 (margin: 1rem)
p-2 (padding: 0.5rem)
p-4 (padding: 1rem)
p-mr-2
p-mr-3
Item
Item
p-ml-2
p-ml-3

Classes: .p-m-0 through .p-m-4, .p-mt-*, .p-mb-*, .p-mr-*, .p-ml-*, .p-p-0 through .p-p-4


Flexbox Utilities:
Item 1
Item 2
Item 3

.p-flex .p-gap-2 - Flex with gap

Centered
Vertically

.p-flex .p-items-center - Vertically centered items

Left
Right

Classes: .p-flex, .p-flex-col, .p-flex-wrap, .p-items-center, .p-justify-between, .p-justify-center, .p-justify-end, .p-gap-1 through .p-gap-4


Text Alignment:
.p-text-left - Left aligned
.p-text-center - Center aligned
.p-text-right - Right aligned

Text Transform:

.p-text-uppercase - uppercase text

.P-TEXT-LOWERCASE - LOWERCASE TEXT

.p-text-capitalize - capitalize each word


Text Decoration:

.p-text-underline - Underlined text

.p-text-line-through - Strikethrough text

.p-text-no-underline - Removes underline


Line Height Utilities:

.p-leading-tight (1.25) - Tight line height creates compact text blocks that work well for headings and short content.

.p-leading-normal (1.5) - Normal line height provides balanced spacing for most body text.

.p-leading-relaxed (1.625) - Relaxed line height improves readability for longer paragraphs.

Classes: .p-leading-none, .p-leading-tight, .p-leading-snug, .p-leading-normal, .p-leading-relaxed, .p-leading-loose


Letter Spacing Utilities:

.p-tracking-tighter - Tighter letter spacing

.p-tracking-normal - Normal letter spacing

.p-tracking-wide - Wide letter spacing

.p-tracking-widest - Widest letter spacing

Classes: .p-tracking-tighter, .p-tracking-tight, .p-tracking-normal, .p-tracking-wide, .p-tracking-wider, .p-tracking-widest


Width Utilities:
.p-w-full - Full width (100%)

Background Colors:
.p-bg-primary
.p-bg-white
.p-bg-success
.p-bg-error
Tabs
Overview

This is the overview tab content. Click on other tabs to see different content.

Accordion
What is Pitcher?
Pitcher is a comprehensive sales enablement platform designed to help teams work more effectively.
How do I get started?
Getting started is easy! Simply sign up for an account and follow our onboarding guide.
What features are included?
We offer content management, CRM integration, offline access, and advanced analytics.
Tooltips & Dropdowns
Tooltips:

This is a tooltip!
Bottom tooltip
Right tooltip
Dropdown:

Actions
Edit Duplicate Archive
Danger Zone
Delete
Avatars
Sizes:

SM
MD
LG
XL
Avatar Group:

JD
SK
MC
ED
List Group
Skeleton Loaders
File Upload
Toast Notifications

Click the button to show a toast notification:

Modal Example