Atomik UI is a library of accessible React components for rapid application development. 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.

Installation

1. Install the Atomik UI package from npm.

// with npm
npm install @atomikui/core

// with yarn
yarn add @atomikui/core

2. Import the supporting CSS into your project.

import '@atomikui/core/dist/styles/main.min.css';
Read installation docs

Usage

Import components as needed into your project.

import { RangeSlider } from '@atomikui/core';
    
<RangeSlider
  label="Select Amount"
  min="100"
  max="1000"
  step="100"
  errorText="Please select an amount"
  onChange={(value) => console.log(value)}
/>
Explore component docs

Components and Features

Containers

Container components act as wrappers for displaying content or other components.

Content

Content components are used to control how content is formatted and displayed.

Data Display

Data display components are used to format and display data in an organized format.

DOM

DOM components are used to interact with elements on the page outside of the current component's scope.

Form Controls

Form Controls are simple UI elements such as buttons and form fields. They are interacted with by the user in order to trigger an action.

Iconography

A comprehensive library of free fonts provided bu Font Awesome.

Informational

Informational components are used to convey helpful information to the user.

Landmarks

Landmarks are major sections on a page

Layout

Layout components are used to provide formatting for page content.

Navigation

Navigation components are used to provide a means to navigate throught an app or website, or provide a means to advance back and forth between content.

Payment

Here you'll find components that can be used to compose a payment wallet UI for your application.

Providers

Providers are HOCs (Higher Order Components) that wrap another component, providing it with access to additional functionality.

Experimental

Experimental components can be used, but are not at a stable point yet, and are subject to change.

Sass Utilities

CSS utilities include classes to add.

Recipes

These recipes can be used to kickstart your project and provide best-practices and helpful suggestions.