atomize design system logo
FeaturesGithubFor Designers

Design System for React JS

Atomize React is a UI framework that helps developers collaborate with designers and build consistent user interfaces effortlessly.

Meagan Fisher

Engineering Manager

Meagan Fisher

Login into your account

Don't have an account yet? Create New

John Doe

UI/UX Designer

Key features

Why use Atomize React?

Atomize React helps you in building fully responsive websites and products that match your style.

Image

Flexible Grid

Change grid variables or give decimal column size.

See How

Image

Style guide

Update theme throughout the application easily.

See How

Image

Spacing

A better and controlled way of update spacing.

See How

Image

Responsive

Better control to make the app responsive.

See How

Image

Beautiful & consistant UI powered with React.

Image

Atomic

Based on Atomic Design Methodology.

Image

Theme Setup

Auto updating colors and Styleguide.

Image

Components

Ever-increasing list of components.

Image

Responsive

Build fully responsive structures easily.

Image

Customisation

Multiple customisations to suit your style.

Image

Icon System

An inbuilt Icon system for faster development.

Code the perfect design for each project using Atomize.

const PaymentCardBlock = () => (
  <Div bg="white" shadow="2" rounded="xl" m={{ b: "1rem" }} p="1.5rem">
    <Div
      border={{ b: "1px solid" }}
      borderColor="gray300"
      p={{ b: "0.75rem" }}
    >
      <Text textSize="title" textWeight="500">
        $1,410.16
      </Text>
      <Text textSize="caption" textColor="light">
        per month
      </Text>
    </Div>
    <Div d="flex" justify="space-between" p={{ t: "1rem", b: "1.5rem" }}>
      <Div>
        <Text textSize="caption" textColor="dark">
          Payment Card
        </Text>
        <Text textSize="caption" textColor="light">
          Component
        </Text>
      </Div>
      <Div>
        <Div d="flex" h="20px">
          {[1, 2, 3, 4, 5].map(num => (
            <Icon
              key={num}
              name="StarSolid"
              size="14px"
              color={num === 5 ? "gray400" : "info700"}
              m={{ r: "0.125rem" }}
            />
          ))}
        </Div>
        <Text textSize="caption" textColor="light">
          Rated 4.0/5
        </Text>
      </Div>
    </Div>
    <Button
      rounded="lg"
      bg="info700"
      hoverBg="info800"
      w="100%"
      textWeight="500"
    >
      Use this design system
    </Button>
  </Div>
)

$1,410.16

per month

Payment Card

Component

Rated 4.0/5

Meagan Fisher

Engineering Manager

Image

Meagan Fisher

$1,410.16

per month

Payment Card

Component

Rated 4.0/5

Meagan Fisher

Engineering Manager

Image

Meagan Fisher

A combination of tools to design and develop modern applications at ease.

Image

Design

Design your website by using Atomize for Sketch App.

Design Resource
Image

Development

Bring your designs to life with Atomize for React JS.

Documentation

UI Templates are on their way 🚀

Official UI templates build on Atomize React will be released very soon.