Quick Navigation
Skunkworks UI Logo

Skunkworks UI

370139c

A comprehensive, reusable React component library built with Radix UI, Tailwind CSS, and TypeScript. All components use the mandatory color palette.

Color Palette (Mandatory)

Primary

Secondary

Destructive

Muted

Accent

Card

Typography

Design System
Font, spacing, and styling guidelines
Font Family

Geist Sans - Primary font for UI and content

--font-geist-sans
Border Radius

0.5rem (8px) - Base radius for cards & dialogs

--radius
Font Weights

Regular (400), Medium (500), Semibold (600), Bold (700)

Titles & Headings
Hierarchical text styles for structure
Page Title

The quick brown fox

Subtitle

A secondary line that supports the title

H1

Heading Level 1

H2

Heading Level 2

H3

Heading Level 3

H4

Heading Level 4

H5
Heading Level 5
H6
Heading Level 6
Body Text
Text styles for content
Lead

Lead text is used for introductory paragraphs that need more emphasis than regular body text.

Body (Regular)

Regular body text for paragraphs and general content. It uses a relaxed line-height for comfortable reading.

Body (Semibold)

Semibold body text for emphasis within paragraphs without using a heading.

Body Small

Smaller body text for secondary content, descriptions, and supporting information.

Muted

Muted text for less important information that shouldn't draw attention.

Utility Text
Special purpose text styles
CaptionSmall text for labels, timestamps, and metadata
OverlineSection marker or category label
Inline Code

Use the InlineCode component for code references like npm install within text.

Blockquote
Good design is as little design as possible. Less, but better, because it concentrates on the essential aspects.

Buttons

Button Variants
Different button styles for various use cases

Badges

Badge Variants
Labels for statuses, counts, and categories
Default
Secondary
Destructive
Outline

Form Controls

Input & Textarea
Checkbox, Switch & Radio
Basic Validation
Real-time validation with visual feedback
Zod Validation
Schema-based validation with Zod

Slider

Slider Component
Drag to select a value within a range

Toggle & Toggle Group

Toggle Components
Toggleable buttons for settings and options

Input OTP

One-Time Password Input
Enter verification codes with accessible input

Select

Select Component
Dropdown selection with keyboard navigation

Calendar

Calendar Component
Date picker with month navigation
January 2026

Selected: Wed Jan 21 2026

Accordion

Accordion Component
Collapsible content sections

Collapsible

Collapsible Component
Expandable/collapsible content area

@peduarte starred 3 repositories

@radix-ui/primitives

Tabs

Account Settings
Manage your account information

Configure your account preferences here.

Breadcrumb

Breadcrumb Component
Navigation breadcrumb trail

Pagination

Pagination Component
Page navigation controls

Dialog, Popover & Sheet

Overlay Components
Modal dialogs, floating content, and slide-out panels

Hover Card

Hover Card Component
Display additional content on hover

Menubar

Menubar Component
Application menu bar with submenus

Command

Command Palette
Search and command interface

Table

Table Component
Display tabular data with sorting, filtering, search, and pagination

Showing 5 of 12 results

INV001
Paid
Credit Card$250.00
INV002
Pending
PayPal$150.00
INV003
Unpaid
Bank Transfer$350.00
INV004
Paid
Credit Card$450.00
INV005
Paid
PayPal$550.00

Page 1 of 3

Carousel

Carousel Component
Slideshow with navigation controls
1
2
3
4
5

Aspect Ratio

Aspect Ratio Component
Maintain consistent width-to-height ratios
16:9 Aspect Ratio

Scroll Area

Scroll Area Component
Custom scrollbar for overflow content
Item 1 - This is scrollable content inside a scroll area component.
Item 2 - This is scrollable content inside a scroll area component.
Item 3 - This is scrollable content inside a scroll area component.
Item 4 - This is scrollable content inside a scroll area component.
Item 5 - This is scrollable content inside a scroll area component.
Item 6 - This is scrollable content inside a scroll area component.
Item 7 - This is scrollable content inside a scroll area component.
Item 8 - This is scrollable content inside a scroll area component.
Item 9 - This is scrollable content inside a scroll area component.
Item 10 - This is scrollable content inside a scroll area component.
Item 11 - This is scrollable content inside a scroll area component.
Item 12 - This is scrollable content inside a scroll area component.
Item 13 - This is scrollable content inside a scroll area component.
Item 14 - This is scrollable content inside a scroll area component.
Item 15 - This is scrollable content inside a scroll area component.
Item 16 - This is scrollable content inside a scroll area component.
Item 17 - This is scrollable content inside a scroll area component.
Item 18 - This is scrollable content inside a scroll area component.
Item 19 - This is scrollable content inside a scroll area component.
Item 20 - This is scrollable content inside a scroll area component.

Resizable

Resizable Panels
Drag to resize panel sections
Panel One
Panel Two

Alerts

Progress

Progress Indicator
Shows completion status

Current progress: 33%

Avatar & Skeleton

Avatar
User profile images with fallback
CNJDAB
Skeleton
Loading placeholders