diff --git a/packages/react-selectors/README.md b/packages/react-selectors/README.md
new file mode 100644
index 00000000..fd7348b2
--- /dev/null
+++ b/packages/react-selectors/README.md
@@ -0,0 +1,11 @@
+# `@wpmudev/react-selectors`
+
+> TODO: description
+
+## Usage
+
+```
+const reactSelectors = require('@wpmudev/react-selectors');
+
+// TODO: DEMONSTRATE API
+```
diff --git a/packages/react-selectors/__tests__/react-selectors.test.js b/packages/react-selectors/__tests__/react-selectors.test.js
new file mode 100644
index 00000000..aecaee3b
--- /dev/null
+++ b/packages/react-selectors/__tests__/react-selectors.test.js
@@ -0,0 +1,7 @@
+'use strict';
+
+const reactSelectors = require('..');
+
+describe('@wpmudev/react-selectors', () => {
+    it('needs tests');
+});
diff --git a/packages/react-selectors/docs/react-selectors-demo.stories.js b/packages/react-selectors/docs/react-selectors-demo.stories.js
new file mode 100644
index 00000000..f7bc00f4
--- /dev/null
+++ b/packages/react-selectors/docs/react-selectors-demo.stories.js
@@ -0,0 +1,81 @@
+import React from "react";
+import { Selectors } from "../lib/react-selectors";
+
+export default {
+	title: "Components/Selectors",
+	component: Selectors,
+	parameters: {
+		actions: {
+			disabled: true,
+		},
+		notes: {
+			disabled: true,
+		},
+	},
+};
+
+export const demo = args => <Selectors {...args} />;
+demo.storyName = 'Demo';
+demo.args = {
+	name: 'selectors',
+	columns: 'three',
+	content: [
+		{
+			id: "unique-id-1",
+			label: "Element text",
+			labelId: "label-id-1",
+			icon: "info",
+		},
+		{
+			id: "unique-id-2",
+			label: "Element text",
+			labelId: "label-id-2",
+			icon: "info",
+		},
+		{
+			id: "unique-id-3",
+			label: "Element text",
+			labelId: "label-id-3",
+			icon: "info",
+			disabled: true,
+			isPro: true,
+		},
+		{
+			id: "unique-id-4",
+			label: "Element text",
+			labelId: "label-id-4",
+			icon: "info",
+		}
+	],
+};
+demo.argTypes = {
+	name: {
+		description: "Name of the selectors radio group.",
+		table: {
+			type: { summary: "string" },
+		},
+		control: {
+			type: 'text',
+		},
+	},
+	columns: {
+		description: "Number of columns or items in one row.",
+		table: {
+			type: { summary: "string" },
+		},
+		control: {
+			type: 'select',
+			options: ['one', 'two', 'three', 'four', 'five'],
+		},
+	},
+	content: {
+		description: "Items in selectors where each item is an object with the appropriate properties.",
+
+		table: {
+			type: { summary: "array" },
+		},
+		control: {
+			type: 'array',
+		},
+	}
+};
\ No newline at end of file
diff --git a/packages/react-selectors/docs/react-selectors-layouts.stories.js b/packages/react-selectors/docs/react-selectors-layouts.stories.js
new file mode 100644
index 00000000..f5957595
--- /dev/null
+++ b/packages/react-selectors/docs/react-selectors-layouts.stories.js
@@ -0,0 +1,250 @@
+import React from 'react';
+import { Selectors } from '../lib/react-selectors';
+
+export default {
+	title: 'Components/Selectors/Layouts',
+	component: Selectors,
+	parameters: {
+		actions: {
+			disabled: true,
+		},
+		controls: {
+			disabled: true,
+		},
+		notes: {
+			disabled: true,
+		},
+		previewTabs: {
+			'storybook/docs/panel': {
+				hidden: true,
+			},
+		},
+	},
+	decorators: [
+		( Story ) => (
+			<div className="sui-box">
+				<div className="sui-box-body">
+					<Story />
+				</div>
+			</div>
+		),
+	],
+};
+
+const StoryTitle = ({ children }) => {
+	const customStyles = {
+		margin: 0,
+		marginBottom: 10 + 'px',
+		color: '#333',
+		fontSize: 14 + 'px',
+		lineHeight: 22 + 'px',
+	};
+
+	return (
+		<h2 style={ customStyles }>{ children }</h2>
+	);
+}
+
+const StoryDescription = ({ children }) => {
+	const customStyles = {
+		margin: 0,
+		marginBottom: 10 + 'px',
+	};
+
+	return (
+		<p className="sui-description" style={ customStyles }>
+			{ children }
+		</p>
+	);
+}
+
+const StoryCode = ({ spaceTop = 5, spaceBottom = 20, children }) => {
+	const customStyles = {
+		display: 'block',
+		margin: 0,
+		marginTop: spaceTop + 'px',
+		marginBottom: spaceBottom + 'px',
+		padding: 5 + 'px ' + 10 + 'px',
+	};
+
+	return (
+		<code style={ customStyles }>{ children }</code>
+	);
+}
+
+const StorySection = ({ title, description, code, code2, isDefault = false, isLast = false, children }) => {
+	return (
+		<>
+			{ title && '' !== title && (
+				<StoryTitle>{ title }{ isDefault && (
+					<span
+						className="sui-tag sui-tag-sm sui-tag-yellow"
+						style={ { marginLeft: 10 + 'px' } }
+						aria-hidden="true"
+					>Default</span>
+				)}</StoryTitle>
+			)}
+			{ description && '' !== description && (
+				<StoryDescription>{ description }</StoryDescription>
+			)}
+			{ code && '' !== code && (
+				<StoryCode { ... ( code2 && '' !== code2 ) && { spaceBottom: 5 } }>{ code }</StoryCode>
+			)}
+			{ code2 && '' !== code2 && (
+				<StoryCode>{ code2 }</StoryCode>
+			)}
+			{ children }
+			{ !isLast && <hr /> }
+		</>
+	);
+}
+
+const content = [
+	{
+		id: "unique-id-1",
+		label: "Auto Col",
+		labelId: "label-id-1",
+		vertical: true,
+	},
+	{
+		id: "unique-id-2",
+		label: "Auto Col",
+		labelId: "label-id-2",
+		vertical: true,
+	},
+	{
+		id: "unique-id-3",
+		label: "Auto Col",
+		labelId: "label-id-3",
+		vertical: true,
+	},
+	{
+		id: "unique-id-4",
+		label: "Auto Col",
+		labelId: "label-id-4",
+		vertical: true,
+	},
+	{
+		id: "unique-id-5",
+		label: "Auto Col",
+		labelId: "label-id-5",
+		vertical: true,
+	},
+];
+
+const oneCol = [
+	{
+		id: "one-unique-id-1",
+		label: "One Column",
+		labelId: "one-label-id-1",
+		vertical: true,
+	},
+	{
+		id: "one-unique-id-2",
+		label: "One Column",
+		labelId: "one-label-id-2",
+		vertical: true,
+	},
+	{
+		id: "one-unique-id-3",
+		label: "One Column",
+		labelId: "one-label-id-3",
+		vertical: true,
+	},
+	{
+		id: "one-unique-id-4",
+		label: "One Column",
+		labelId: "one-label-id-4",
+		vertical: true,
+	},
+	{
+		id: "one-unique-id-5",
+		label: "One Column",
+		labelId: "one-label-id-5",
+		vertical: true,
+	},
+	{
+		id: "one-unique-id-6",
+		label: "One Column",
+		labelId: "one-label-id-6",
+		vertical: true,
+	},
+];
+
+export const auto = () => {
+	return (
+		<StorySection
+			title="Auto-Width Columns"
+			description="Not matter how many elements are, they all will be placed in one row."
+			code="&lt;Selectors name=&quot;autowidth&quot; content={content} /&gt;"
+			isLast={true}>
+			<Selectors name="autowidth" content={content} />
+		</StorySection>
+	);
+};
+auto.storyName = 'Auto Width';
+
+export const one = () => {
+	return (
+		<StorySection
+			title="1 Column"
+			description="The elements will occupy the full-width of the row."
+			code="&lt;Selectors name=&quot;one&quot; columns=&quot;one&quot; content={oneCol} /&gt;"
+			isLast={true}>
+			<Selectors name="one" columns="one" content={oneCol} />
+		</StorySection>
+	);
+};
+one.storyName = '1 Column';
+
+export const two = () => {
+	return (
+		<StorySection
+			title="2 Column"
+			description="The elements will have 50% width and will be placed a max of two elements per row."
+			code="&lt;Selectors name=&quot;two&quot; columns=&quot;two&quot; content={oneCol} /&gt;"
+			isLast={true}>
+			<Selectors name="two" columns="two" content={oneCol} />
+		</StorySection>
+	);
+};
+two.storyName = '2 Column';
+
+export const three = () => {
+	return (
+		<StorySection
+			title="3 Column"
+			description="Elements will ocuppy a third of a row, allowing a max of 3 elements to be placed per row."
+			code="&lt;Selectors name=&quot;three&quot; columns=&quot;three&quot; content={oneCol} /&gt;"
+			isLast={true}>
+			<Selectors name="three" columns="three" content={oneCol} />
+		</StorySection>
+	);
+};
+three.storyName = '3 Column';
+
+export const four = () => {
+	return (
+		<StorySection
+			title="4 Column"
+			description="Elements will ocuppy a fourth of a row, allowing a max of 4 elements to be placed per row."
+			code="&lt;Selectors name=&quot;four&quot; columns=&quot;four&quot; content={oneCol} /&gt;"
+			isLast={true}>
+			<Selectors name="four" columns="four" content={oneCol} />
+		</StorySection>
+	);
+};
+four.storyName = '4 Column';
+
+export const five = () => {
+	return (
+		<StorySection
+			title="5 Column"
+			description="Elements will ocuppy a fifth of a row, allowing a max of 5 elements to be placed per row."
+			code="&lt;Selectors name=&quot;five&quot; columns=&quot;five&quot; content={oneCol} /&gt;"
+			isLast={true}>
+			<Selectors name="five" columns="five" content={oneCol} />
+		</StorySection>
+	);
+};
+five.storyName = '5 Column';
diff --git a/packages/react-selectors/docs/react-selectors-modifiers.stories.js b/packages/react-selectors/docs/react-selectors-modifiers.stories.js
new file mode 100644
index 00000000..ed705069
--- /dev/null
+++ b/packages/react-selectors/docs/react-selectors-modifiers.stories.js
@@ -0,0 +1,318 @@
+import React from 'react';
+import { Selectors } from '../lib/react-selectors';
+
+export default {
+	title: 'Components/Selectors/Design',
+	component: Selectors,
+	parameters: {
+		actions: {
+			disabled: true,
+		},
+		controls: {
+			disabled: true,
+		},
+		notes: {
+			disabled: true,
+		},
+		previewTabs: {
+			'storybook/docs/panel': {
+				hidden: true,
+			},
+		},
+	},
+	decorators: [
+		( Story ) => (
+			<div className="sui-box">
+				<div className="sui-box-body">
+					<Story />
+				</div>
+			</div>
+		),
+	],
+};
+
+const StoryTitle = ({ children }) => {
+	const customStyles = {
+		margin: 0,
+		marginBottom: 10 + 'px',
+		color: '#333',
+		fontSize: 14 + 'px',
+		lineHeight: 22 + 'px',
+	};
+
+	return (
+		<h2 style={ customStyles }>{ children }</h2>
+	);
+}
+
+const StoryDescription = ({ children }) => {
+	const customStyles = {
+		margin: 0,
+		marginBottom: 10 + 'px',
+	};
+
+	return (
+		<p className="sui-description" style={ customStyles }>
+			{ children }
+		</p>
+	);
+}
+
+const StoryCode = ({ spaceTop = 5, spaceBottom = 20, children }) => {
+	const customStyles = {
+		display: 'block',
+		margin: 0,
+		marginTop: spaceTop + 'px',
+		marginBottom: spaceBottom + 'px',
+		padding: 5 + 'px ' + 10 + 'px',
+	};
+
+	return (
+		<code style={ customStyles }>{ children }</code>
+	);
+}
+
+const StorySection = ({ title, description, code, code2, isDefault = false, isLast = false, children }) => {
+	return (
+		<>
+			{ title && '' !== title && (
+				<StoryTitle>{ title }{ isDefault && (
+					<span
+						className="sui-tag sui-tag-sm sui-tag-yellow"
+						style={ { marginLeft: 10 + 'px' } }
+						aria-hidden="true"
+					>Default</span>
+				)}</StoryTitle>
+			)}
+			{ description && '' !== description && (
+				<StoryDescription>{ description }</StoryDescription>
+			)}
+			{ code && '' !== code && (
+				<StoryCode { ... ( code2 && '' !== code2 ) && { spaceBottom: 5 } }>{ code }</StoryCode>
+			)}
+			{ code2 && '' !== code2 && (
+				<StoryCode>{ code2 }</StoryCode>
+			)}
+			{ children }
+			{ !isLast && <hr /> }
+		</>
+	);
+}
+
+const simpleContent = [
+	{
+		id: "unique-id-1",
+		label: "Checked",
+		labelId: "label-id-1",
+		icon: "info",
+		checked: true,
+	},
+	{
+		id: "unique-id-2",
+		label: "Unchecked",
+		labelId: "label-id-2",
+		icon: "info",
+	},
+	{
+		id: "unique-id-3",
+		label: "Unchecked",
+		labelId: "label-id-3",
+		icon: "info",
+	},
+	{
+		id: "unique-id-4",
+		label: "Unchecked",
+		labelId: "label-id-4",
+		icon: "info",
+	},
+	{
+		id: "unique-id-5",
+		label: "Unchecked",
+		labelId: "label-id-5",
+		icon: "info",
+		disabled: true,
+		isPro: true,
+	},
+];
+
+const simpleVerticalContent = [
+	{
+		id: "vertical-unique-id-1",
+		label: "Checked",
+		labelId: "vertical-label-id-1",
+		checked: true,
+		icon: "info",
+		vertical: true,
+	},
+	{
+		id: "vertical-unique-id-2",
+		label: "Unchecked",
+		labelId: "vertical-label-id-2",
+		icon: "info",
+		vertical: true,
+	},
+	{
+		id: "vertical-unique-id-3",
+		label: "Unchecked",
+		labelId: "vertical-label-id-3",
+		icon: "info",
+		vertical: true,
+	},
+	{
+		id: "vertical-unique-id-4",
+		label: "Unchecked",
+		labelId: "vertical-label-id-4",
+		icon: "info",
+		vertical: true,
+	},
+	{
+		id: "vertical-unique-id-5",
+		label: "Unchecked",
+		labelId: "vertical-label-id-5",
+		icon: "info",
+		vertical: true,
+		disabled: true,
+		isPro: true,
+	},
+];
+
+const compoundContent = [
+	{
+		id: "compound-unique-id-1",
+		label: "Checked",
+		labelId: "compound-label-id-1",
+		icon: "info",
+		description: "This is a description",
+		descriptionId: "compound-description-id-1",
+		checked: true,
+	},
+	{
+		id: "compound-unique-id-2",
+		label: "Unchecked",
+		labelId: "compound-label-id-2",
+		icon: "info",
+		description: "This is a description",
+		descriptionId: "compound-description-id-2",
+	},
+	{
+		id: "compound-unique-id-3",
+		label: "Unchecked",
+		labelId: "compound-label-id-3",
+		icon: "info",
+		description: "This is a description",
+		descriptionId: "compound-description-id-3",
+	},
+	{
+		id: "compound-unique-id-4",
+		label: "Unchecked",
+		labelId: "compound-label-id-4",
+		icon: "info",
+		description: "This is a description",
+		descriptionId: "compound-description-id-4",
+	},
+	{
+		id: "compound-unique-id-5",
+		label: "Unchecked",
+		labelId: "compound-label-id-5",
+		icon: "info",
+		description: "This is a description",
+		descriptionId: "compound-description-id-5",
+		disabled: true,
+		isPro: true,
+	},
+];
+
+const compoundVerticalContent = [
+	{
+		id: "vertical-compound-unique-id-1",
+		label: "Checked",
+		labelId: "vertical-compound-label-id-1",
+		icon: "info",
+		description: "This is a description",
+		descriptionId: "vertical-compound-description-id-1",
+		checked: true,
+		vertical: true,
+	},
+	{
+		id: "vertical-compound-unique-id-2",
+		label: "Unchecked",
+		labelId: "vertical-compound-label-id-2",
+		icon: "info",
+		description: "This is a description",
+		descriptionId: "vertical-compound-description-id-2",
+		vertical: true,
+	},
+	{
+		id: "vertical-compound-unique-id-3",
+		label: "Unchecked",
+		labelId: "vertical-compound-label-id-3",
+		icon: "info",
+		description: "This is a description",
+		descriptionId: "vertical-compound-description-id-3",
+		vertical: true,
+	},
+	{
+		id: "vertical-compound-unique-id-4",
+		label: "Unchecked",
+		labelId: "vertical-compound-label-id-4",
+		icon: "info",
+		description: "This is a description",
+		descriptionId: "vertical-compound-description-id-4",
+		vertical: true,
+	},
+	{
+		id: "vertical-compound-unique-id-5",
+		label: "Unchecked",
+		labelId: "vertical-compound-label-id-5",
+		icon: "info",
+		description: "This is a description",
+		descriptionId: "vertical-compound-description-id-5",
+		disabled: true,
+		isPro: true,
+		vertical: true,
+	},
+];
+
+export const Default = () => {
+	return (
+		<>
+			<StorySection
+				title="Simple"
+				description="By default the box selectors are aligned horizontal, based on its icon + text position, and text is always left aligned."
+				code="&lt;Selectors name=&quot;simple&quot; columns=&quot;three&quot; content={simpleContent} /&gt;"
+				isDefault={ true }>
+				<Selectors name="simple" columns="three" content={simpleContent} />
+			</StorySection>
+			<StorySection
+				title="Compound"
+				description="There are some cases where you gonna need to include a description for the items."
+				code="&lt;Selectors name=&quot;compound&quot; columns=&quot;three&quot; content={compoundContent} /&gt;"
+				isLast={ true }>
+				<Selectors name="compound" columns="three" content={compoundContent} />
+			</StorySection>
+		</>
+	);
+};
+Default.storyName = 'Default';
+
+export const Vertical = () => {
+	return (
+		<>
+			<StorySection
+				title="Simple"
+				description="You can vertical align box selectors where its text will always be center aligned and icon will be placed on top of text."
+				code="&lt;Selectors name=&quot;vertical&quot; columns=&quot;three&quot; content={simpleVerticalContent} /&gt;"
+				isDefault={true}>
+				<Selectors name="vertical" columns="three" content={simpleVerticalContent} />
+			</StorySection>
+			<StorySection
+				title="Compound"
+				description="There are some cases where you gonna need to include a description for the items."
+				code="&lt;Selectors name=&quot;compound&quot; columns=&quot;three&quot; content={compoundVerticalContent} /&gt;"
+				isLast={ true }>
+				<Selectors name="compound" columns="three" content={compoundVerticalContent} />
+			</StorySection>
+		</>
+	);
+};
+Vertical.storyName = 'Vertical';
\ No newline at end of file
diff --git a/packages/react-selectors/lib/react-selectors.js b/packages/react-selectors/lib/react-selectors.js
new file mode 100644
index 00000000..1a5d25df
--- /dev/null
+++ b/packages/react-selectors/lib/react-selectors.js
@@ -0,0 +1,61 @@
+import React from 'react'
+
+const Selectors = ({
+    name,
+    columns = '',
+    content = [],
+}) => {
+    let classes = 'sui-box-selectors';
+    
+    switch (columns) {
+        case 'one':
+            classes += ' sui-box-selectors-col-1';
+            break;
+        case 'two':
+            classes += ' sui-box-selectors-col-2';
+            break;
+        case 'three':
+            classes += ' sui-box-selectors-col-3';
+            break;
+        case 'four':
+            classes += ' sui-box-selectors-col-4';
+            break;
+        case 'five':
+            classes += ' sui-box-selectors-col-5';
+            break;
+        default:
+            break;
+    }
+
+    return (
+        <div className={classes}>
+            <ul role="radiogroup">
+                {content.map((item, index) => (
+                    <li key={index}>
+                        <label 
+                            htmlFor={item.id} 
+                            className={`sui-box-selector ${item.disabled && ('sui-disabled')} ${item.vertical && ('sui-box-selector-vertical')}`}
+                        >
+                            <input type="radio" 
+                                name={name} 
+                                id={item.id} 
+                                aria-labelledby={item.labelId}
+                                aria-describedby={item.descriptionId}
+                                disabled={item.disabled ? true : false}
+                                defaultChecked={item.checked ? true : false}
+                            />
+                            <span aria-hidden="true">
+                                {item.icon && (<span className={`sui-icon-${item.icon}`}></span>)}
+                                <span id={item.labelId} aria-hidden="true">{item.label}</span>
+                                {item.isPro && (<span className="sui-tag sui-tag-pro">Pro</span>)}
+                            </span>
+                            {item.description && (<span id={item.descriptionId} aria-hidden="true">{item.description}</span>)}
+                        </label>
+                    </li>
+                ))}
+            </ul>
+        </div>
+    )
+}
+
+export { Selectors }
diff --git a/packages/react-selectors/package.json b/packages/react-selectors/package.json
new file mode 100644
index 00000000..6b5cc4d6
--- /dev/null
+++ b/packages/react-selectors/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "@wpmudev/react-selectors",
+  "version": "1.0.0",
+  "description": "Now I’m the model of a modern major general / The venerated Virginian veteran whose men are all / Lining up, to put me up on a pedestal / Writin’ letters to relatives / Embellishin’ my elegance and eloquence / But the elephant is in the room / The truth is in ya face when ya hear the British cannons go / BOOM",
+  "keywords": [],
+  "author": "Pawan Kumar <pwnkumar201@gmail.com>",
+  "license": "ISC",
+  "main": "lib/react-selectors.js",
+  "directories": {
+    "lib": "lib",
+    "test": "__tests__"
+  },
+  "files": [
+    "lib"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/wpmudev/shared-ui-react.git"
+  },
+  "scripts": {
+    "test": "echo \"Error: run tests from root\" && exit 1"
+  },
+  "bugs": {
+    "url": "https://github.com/wpmudev/shared-ui-react/issues"
+  },
+  "homepage": "https://github.com/wpmudev/shared-ui-react#readme"
+}