Responsive Styles

Configure your breakpoints

Define your media at-rules in the media config. You can add as many as you need.

hypergood.config.ts

export const styleConfig = {
  media: {
    sm: '(min-width: 600px)',
    md: '(min-width: 840px)',
    lg: '(min-width: 1200px)',
    xl: '(min-width: 1600px)',
  },
} satisfies StyleConfig;

Using breakpoints in the style objects

Button.tsx

function Button() {
  return (
    <button
      css={{
        padding: 4,
        "@sm": {
          padding: 8,
        }
      }}
    />
  );
}

Output (simplified)

.button {
  padding: 4px;
}

@media (min-width: 600px) {
  .button {
    padding: 8px;
  }
}

Hypergood CSS comes with a set of recommended media queries that you can use. You may extend or replace parts of it using object spread syntax, or you can define your own.

hypergood.config.ts

import { RECOMMENDED_MEDIA } from "@hypergood/css/presets";

const styleConfig = {
  media: {
    ...RECOMMENDED_MEDIA,
    sm: "(min-width: 600px)",
  },
};

The Style Object

Theming

On this page