Component Playground
Explore and test all TPMJS UI components in one place
Buttons
Variants
Sizes
States
Badges
Variants
Default
Secondary
Error
Outline
Success
Warning
Info
Sizes
Small
Medium
Large
Icons
Sizes
Small
Medium
Large
Available Icons
check
x
chevronDown
copy
externalLink
github
sun
moon
Cards
Variants
Default Card
This is the default card style
Cards are flexible containers for content.
Elevated Card
This card has a shadow elevation
Perfect for highlighting important content.
Outline Card
This card has an outline border
Great for subtle content separation.
Inputs
Sizes
States
Progress Bars
Variants
Primary65%
Success100%
Warning45%
Danger20%
Interactive
Adjust Progress65%
Tabs
Interactive Tabs
Active tab: all
Code Block
Example Code
import { Button } from "@tpmjs/ui/Button/Button";
export default function Example() {
return (
<Button variant="default" size="md">
Click me!
</Button>
);
}JSON Example
{
"name": "@tpmjs/ui",
"version": "0.1.3",
"type": "module"
}Containers
Container Sizes
size="sm"size="md"size="lg"size="xl"Form Components
Textarea
Tell us about yourself
0 / 200
Maximum 200 characters
Checkboxes
Radio Buttons
Switches
Receive email notifications about updates
Receive marketing and promotional emails
This switch is disabled
Select
Select your country
Slider
50
Current volume: 50%
Cold
Warm
Hot
Complete Form Example
User Profile
Update your profile information
0 / 500
Tell us about yourself