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.

Flexible Grid

Change grid variables or give decimal column size.

See How

Style guide

Update theme throughout the application easily.

See How

Spacing

A better and controlled way of update spacing.

See How

Responsive

Better control to make the app responsive.

See How

Beautiful & consistant UI powered with React.

Atomic

Based on Atomic Design Methodology.

Theme Setup

Auto updating colors and Styleguide.

Components

Ever-increasing list of components.

Responsive

Build fully responsive structures easily.

Customisation

Multiple customisations to suit your style.

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

Meagan Fisher

$1,410.16

per month

Payment Card

Component

Rated 4.0/5

Meagan Fisher

Engineering Manager

Meagan Fisher

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

Design

Design your website by using Atomize for Sketch App.

Design Resource

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.