Skip to main content

Component Size Calculator

Calculate optimal sizes for buttons, inputs, and UI components

Component Configuration

Select component type and size variant

Component Preview

Visual representation of the component size

Size Specifications

Recommended dimensions for this component size

height40px
padding8px 20px
font Size16px
border Radius8px

Generated CSS

CSS code for this component size

.button-md {
  height: 40px;
  padding: 8px 20px;
  font-size: 16px;
  border-radius: 8px;
}

How to Use

1. Select the type of component you want to size

2. Choose a size variant (XS, SM, MD, LG, XL)

3. View the live preview and specifications

4. Copy the generated CSS for use in your project