Component Gallery
Interactive atomic components showcase
Text Component
Typography Variants
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Lead paragraph text for emphasis
Body text for regular content. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Small text for secondary information
const example = "code text";Emphasized text for special attentionCaption text for descriptions
Dice Component
D6 Dice
D6 Dice
?
D20 Dice
D20 Dice
?
Dice Tray Component
Dice Tray - 5 × D6
Total
0
0 dice locked
Active Dice (drag to lock zone to save)
No dice in tray - drag dice here to unlock
🔒 Lock Zone (drag here to preserve values)
Drag dice here to lock their values
💡 Tips:
- Drag dice to the lock zone to preserve their values
- Click on dice to quickly toggle lock status
- Locked dice won't roll when you click "Roll Unlocked Dice"
- Drag locked dice back to the tray to unlock them
D20 Dice Tray
Dice Tray - 3 × D20
Total
0
0 dice locked
Active Dice (drag to lock zone to save)
No dice in tray - drag dice here to unlock
🔒 Lock Zone (drag here to preserve values)
Drag dice here to lock their values
💡 Tips:
- Drag dice to the lock zone to preserve their values
- Click on dice to quickly toggle lock status
- Locked dice won't roll when you click "Roll Unlocked Dice"
- Drag locked dice back to the tray to unlock them
Next Steps
Build more atomic components following the same pattern as the Text, Dice, and DiceTray components.