A Comprehensive Library of React Components

Usage no npm install needed!

<script type="module">
  import alaneickerAtomikUi from 'https://cdn.skypack.dev/@alaneicker/atomik-ui';


Atomik UI

A Library of Accessible React Components for Rapid Application Development

Travis CI Status Image Quality Gate Status Package Version Image GitHub repo size GitHub issues GitHub commit activity

Atomik UI is a comprehensive library of React components for kickstarting any React based project. From form controls to informational components like modals, alerts and toast notifications, you'll find everything you need here to get your next project off the ground.


Atomik UI comes with a variety of customizable React components to suit any development need:

  • Containers
  • Content
  • Data Display
  • Form Controls
  • Informational
  • Layout
  • Navigational
  • Templates


1. Install the component library

Install the core Atomik UI module as a production dependency.

npm install --save @alaneicker/atomik-ui

2. Import the Component library CSS

Import the Atomik UI library core CSS.

import '@alaneicker/atomik-ui/dist/styles/main.min.css';

3. Install and Import the Sass Utilities Abstracts (Optional)

The Sass Utilities package contains functions, mixins, variables, and 192 colors that can be used in you project.


npm install @alaneicker/sass-utilities;
@import 'node_modules/@alaneicker/sass-utilities/abstracts';

4. Begin Importing Components

It is recommended to import components as needed instead of importing the whole Atomik UI.

import { FormField, CheckOption, Dropdown } from '@alaneicker/atomik-ui';

Atomik UI Maintainers