Component library v3.2 · 10 categories, all live

The UI Kit.

Every header, bar, button, card, form and loader I ship, one category at a time. Each one is live: hover it, click it, open its code and copy it. Further down, a button is taken apart and you can tune the motion curves yourself.

Components
50
Variants
214
Tokens
86
Dependencies
0
Browse components Take a button apart
Specimen / v3.2
Button / Primary
Controls
Type Aa

Shippori Mincho B1Display · 800

Zen Kaku Gothic NewBody · 400

Colour
  • Shu#C4321D
  • Sumi#1F1813
  • Washi#EFE4CC
  • Aotake#2C6F65
  • Kincha#D9A441
Exported 12 frames to code
解 Anatomy

One button, taken apart.

Before anything goes on the canvas it gets a spec like this. Change the tokens on the right and watch every state, measurement and line of CSS follow.

    動 Motion

    Easing you can feel, then copy.

    Drag the two handles. The dot, the card and the menu below all run on the same curve, so you can judge it on real UI instead of a bouncing ball.

    Move
    Enter
    Invoice sentto Amina · ৳42,000
    Menu
    RenameDuplicateMove to…Delete
    motion.css
    
        
    
      
    
    
    
  
    

  
    
    
    
      
    
        
    
          型 Design → code, no gaps
          
    I design it in Figma. Then I ship it.
    
          
    Your project gets its own design system in Figma: tokens, components, motion rules. Then I build those same components in code. No “the developer changed my design” moments.
    
          
    Design & build my UI See it live in the Lab
    
        
    
        
      
          
    1. v3.2
      • Toast stack pauses while you hover it
      • OTP input accepts a pasted code
      • Segmented control ink no longer jumps on resize
      2. 
          
    2. v3.1
      • Command palette with arrow-key navigation
      • Katana slash and glitch text loaders
      • Focus rings moved to :focus-visible
      3. 
          
    3. v3.0
      • Every colour, radius and duration is now a token
      • Dark frames for all 50 components
      4. 
          
    4. v2.4
      • Checkout stepper and bottom navigation
      • Pricing card contrast passes AA
      5.