Inputs & Atoms

Kitchen sink for Buttons, Inputs, Selection, and Form elements.

Atoms

Buttons

Badges

DefaultSecondaryDestructiveOutline

Avatars

CNJD

Inputs & Forms

Text Inputs

Password

Disabled

Textarea & Select

Message

Select Option

Slider (50)

🔥 Proprietary Stress TestsQA MODE

1. The "Label & Value" Overflow TestLAYOUT

Testing extreme text lengths in constrained containers.

w-[200px]

Badge with super long content that goes on forever

w-[300px]

Label that is way too long and might break the layout if not handled properly in this grid

2. The "Universal Error" StateSTATES

Forcing invalid states on all inputs simultaneously.

Invalid Input

Generic error message

Invalid Select

Selection required

Invalid Textarea

Must accept terms

3. The "Disabled Fieldset" CascadePROPAGATION

Verifying native browser behavior for disabled fieldsets propagates to custom components.

Disabled Fieldset

Input (Inside Fieldset)

Select (Inside Fieldset)

Switch (Inside Fieldset)

4. The "Loading & Pending" GhostANIMATION

React 19 pending states and loading feedback visual checks.

5. The "Z-Index & Portal" Torture ChamberCLIPPING

Testing escapes from constrained/scrollable containers.

⚠ Constraint Container (Overflow: Auto)

Bottom content

6. Broken Asset & Long NameFALLBACKS

Verifying avatar behavior with broken assets and extreme strings.

Broken URL

AMIII

Extra Long Initials

Ring Offset Check

7. The "Chopped" Focus RingA11Y

Ensuring focus rings aren't clipped by tight overflow:hidden containers.

Tab through these to check ring visibility.

8. Layout Shift ValidationUX/STABILITY

Toggle error state to check for jarring layout translations.

Simulate Error State

Stable Container (Reserved Space)

Notice: Below content stays still.

Shifting Container (No Reserve)

Notice: Content jumps when error appears.