Skip to main content

Styling (Atomize)

Why wrap a component in Atomize?#

  • To integrate third-party components into the Quarkly builder;
  • To add styles as component properties;
  • To use overrides in HTML elements;
  • To apply variables, effects, and breakpoints from the project theme.

How do I use pseudo classes like hover, focus?#

Use the pseudo class name as a prefix:

  • Inside JSX markup:

    <Box color="red" hover-color="green" focus-color="blue" />
  • Inside overrides:

    props: {
    color: red,
    hover-color: green,
    focus-color: blue,

You can also transfer an effects object to Atomize if this effect should be applied to the entire component.

effects: {
hover: ":hover",
focus: ":focus",

See more in the Effects (pseudo classes) section.

How do I use pseudo elements: before, after?#

At the moment, the before and after pseudo elements haven't been added to the builder interface, but you can use them in your code.

  • As properties in the code of a component or page:

    <MyButton before-content="Before" after-content="After" />
  • When creating components with Atomize:

    import atomize from "@quarkly/atomize";
    const MyComponent = atomize.div`
    color: red;
    &:before {
    content: "Before";
    color: green;
    &:after {
    content: "After";
    color: blue;

What's the difference between exporting Object.assign(Component) and Atomize(Component)?#

If a component is wrapped in another component (e.g. <div {...props}> ... </div>), exporting Atomize will create a React component from it. If a component is wrapped in another component (e.g. <Box {...props}> ... </Box>), there is no difference.

How do I get a project theme?#

To get the current project theme, import the useTheme hook from the styled-components library and call it in the component.

import { useTheme } from "styled-components";
const theme = useTheme();

The theme object contains all the theme variables from the right panel which you can use in the component styles.