import { Meta } from '@storybook/addon-docs/blocks';

<Meta title="Guides/Custom Components/StyledComponents/Intro" />

# Developing custom components with StyledComponents

Make sure you read [Guide: Developing custom components with DS primitives](/story/guides-custom-components-introduction--page)

## Guidelines

**Do:** Use `minWidth` responsive mixin ([Read more](/story/guides-custom-components-styledcomponents-responsive--page)).

```tsx
import { minWidth } from '@preply/ds-web-core';

export const MyStyledComponentWithBreakpoints = styled.div`
    ${minWidth('medium-l')} {
        ...
    }
`;
```

**Do:** Use token variables via `getTokenVar()` ([Read more](/story/guides-custom-components-styledcomponents-tokens--page)).

If you're working with a designer you can see [references to tokens](/story/quickstart-for-engineers--page#reading-figma-files)
in their Figma files. Use the [Token Explorer](/story/guides-token-explorer--page) to search tokens
by name, id, or value (make sure you have the correct theme selected).

```css
@import '@preply/ds-web-core/dist/generated/tokens.less';
```

**Don't**: Use `max-width` breakpoints

```css
@media (max-width: @breakpoints[medium-l]) {
    /* ... */
}
```

**Don't**: Use `@preply/ui` breakpoints or variables.

```css
border-radius: @border-radius-m;

@media (min-width: @responsive-mobile-normal) {
    /* ... */
}
```
