Skip to main content

Component Properties

Component properties are the main controls for customizing your components—think of them as the dials and switches for all your variants. But before you go wild, remember: the more complex your properties, the more you risk over-engineering. Keep it simple, and your future self will thank you!

info

Some property names are reserved for special powers. Use them right, and I’ll generate code that’s responsive, interactive, and beautiful.

Reserved Property Names​

There are two keywords I treat as extra special:

  1. viewport (for responsive design)
  2. state (for interactive states like hover, active, etc.)

Viewport​

I reserve the property name viewport to help you build responsive components. The value should always be a number—the minimum width at which the variant should apply. Mobile-first is the default, so 0 means “start at the smallest screen.”

For example, if you want a button to change size at 768px and above:

Responsive Button Example
.button {
    font-size: 16px;
}
@media (min-width: 767px) {
    .button {
        font-size: 20px;
    }
}
info

Viewport values should always be numbers. If you use strings or other types, things might break or get weird.

State​

The state property lets you define visual differences for component states, like default, hover, active, or disabled. This helps me generate code that handles interactions smoothly.

For example, a button with a default and hover state:

Button State Example
.button {
    background-color: #000;
}

.button:hover {
    background-color: #00f;
}
caution

Don’t use viewport or state for unrelated variants. These are reserved for responsive and interactive behaviors only!

Common Mistakes​

  • Using non-numeric values for viewport (should always be a number)
  • Naming unrelated variants viewport or state
  • Forgetting mobile-first defaults (viewport = 0)
  • Overcomplicating properties with too many variants

Best Practices Checklist​

  • Use reserved names (viewport, state) only for their intended purpose
  • Keep property values simple and predictable
  • Always use numbers for viewport values
  • Remember, we always start with mobile-first (viewport = 0)
  • Double-check for typos or accidental duplicates
  • Don’t over-engineer; less is more!