Saltcat UI Components - Comprehensive Showcase

💥 Buttons & Actions

Base Button Variants

Variants

Sizes

States

Semantic Buttons

📝 Form Controls

Text Inputs

Basic Input

With Value

Disabled

Semantic Inputs

Email Address

Search

Website URL

Phone Number

Date

Number

Password

Textareas

Basic Textarea

Message

0/1000 characters

Comment

0/1000 characters

Description

0/5000 characters

Checkboxes & Radio Buttons

Select Dropdowns

Basic Select

Other Controls

Switch

Enable notifications

Dark mode

Disabled

Star Rating

Rating: 3/5

Color Picker

Preset Colors

Custom Color

Selected: #667eea

📊 Data Display

Badges

Default Primary Secondary Success Warning Danger

Small Medium Large

Chips

JavaScript

TypeScript

Svelte

React

Vue

User Profile Icons

+2

Cards

Alice Johnson

alice@example.com

Designer

Premium Widget

$99.99

Electronics

High-quality widget with all features

In Stock

★★★★☆ (4.5)

Getting Started with Saltcat

By John Doe

March 15, 2024

Tutorial

Learn how to build beautiful UIs with Saltcat components...

5 min read

Tooltips

?

ℹ

❌

Loading States

Spinners

Loading

Progress Bar

65% complete

Skeleton

Inline Elements

Here's some inline code in a paragraph. You can use it to highlight variables or function names in text.

🔔 Feedback & Notifications

Toasts

Modals

Banner

ℹ️

New features available! Check out our latest updates.

⚠️

Scheduled maintenance: Services may be unavailable on Sunday.

🧭 Navigation

Tabs

Overview content - This tab shows the main dashboard

Semantic Tabs

Overview content - This tab shows the main dashboard

Accordions

Saltcat UI Components is an avant-garde component library inspired by master artists like Ansel Adams and Leonardo da Vinci.

Simply install the package, import the components you need, and wrap your app with a ThemeProvider.

We offer Base, Ansel Adams, Leonardo, Albrecht Dürer, and Avant-Garde themes, each with unique design principles.

Yes! All components follow WCAG 2.1 AA standards with proper ARIA labels and keyboard navigation.

FAQ Accordion

Saltcat UI Components is an avant-garde component library inspired by master artists like Ansel Adams and Leonardo da Vinci.

Simply install the package, import the components you need, and wrap your app with a ThemeProvider.

We offer Base, Ansel Adams, Leonardo, Albrecht Dürer, and Avant-Garde themes, each with unique design principles.

Yes! All components follow WCAG 2.1 AA standards with proper ARIA labels and keyboard navigation.

📐 Layout & Grid

Grid System

Item 1

Item 2

Item 3

Item 4 (span 2)

Item 5

Spacing Examples

XS Spacing

SM Spacing

MD Spacing

LG Spacing

XL Spacing

2XL Spacing

🎯 Semantic Components Summary

Component Categories

🔘 Buttons (8)

Primary, Secondary, Submit, Success, Warning, Danger, Cancel, Reset

📝 Inputs (7)

Email, Search, URL, Phone, Date, Number, Password

✅ Checkboxes (4)

Agree, RememberMe, Subscribe, Terms

🔘 Radio Groups (3)

Gender, YesNo, Rating

📋 Selects (4)

Language, Currency, State, Country

💬 Textareas (3)

Message, Comment, Description

🃏 Cards (5)

User, Product, Article, Profile, Dashboard

📑 Tabs (3)

Navigation, Content, Settings

📁 Accordions (2)

FAQ, Menu

🪟 Modals (5)

Confirm, Alert, Error, Success, Prompt

💡 Tooltips (3)

Help, Info, Error