MCN Components

MCN Components is a collection of reusable React components designed to help developers build consistent and accessible user interfaces quickly. Each component is highly customizable and typed with TypeScript for a better developer experience. The library includes a ConfigProvider to customize component styles globally or locally, with support for nested ConfigProvider instances to override configurations at different levels.

Installation

To install the library, run:

npm install mcn-components

yarn add mcn-components

pnpm install mcn-components

Then, import the component styles in App.js or App.tsx:

import 'mcn-components/styles.css'

Then, import the components you need:

import { Alert, Button, Modal, ConfigProvider } from 'mcn-components'

Table of Contents

• ConfigProvider
• Alert
• Avatar
• Button
• Countdown
• Image
• InputPlain
• Link
• Modal
• Popover
• SectionTitle
• SelectPlain
• Spinner
• Table
• Tabs
• Tag
• TextAreaPlain

ConfigProvider

The ConfigProvider component allows you to customize the styles of all MCN components by providing a configuration object. It uses a context to propagate styling configurations to child components, enabling both global and local theme overrides. You can nest ConfigProvider components to apply different configurations at various levels, with inner providers merging their configurations with outer ones using a deep merge strategy.

Props

• children: Required. The child components to be styled.
• components: Optional. An object specifying style configurations for components (e.g., Button, Alert, Avatar, etc.).
• token: Optional. A flexible type for custom tokens (to be refined in future updates).

Example

import { ConfigProvider, Button, Alert } from 'mcn-components'

const outerConfig = {
	Button: {
		rounded: 'rounded-none',
		theme: {
			primary: {
				colorBackground: 'bg-[#FFD41A]',
				colorBackgroundHover: 'hover:bg-[#FFD41A]',
				colorBackgroundDisabled: 'bg-[#8B99A3]',
				colorBackgroundDisabledHover: 'hover:bg-[#8B99A3]',
				colorText: 'text-[#24292F]',
				colorTextHover: 'hover:text-[#24292F]',
				colorTextDisabled: 'text-[#24292F]',
				colorTextDisabledHover: 'hover:text-[#24292F]',
				colorBorder: 'border-[#FFD41A]',
				colorBorderHover: 'hover:border-[#FFD41A]',
				colorBorderDisabled: 'border-[#8B99A3]',
				colorBorderDisabledHover: 'hover:border-[#8B99A3]',
				colorFill: 'fill-[#24292F]',
				colorFillHover: 'hover:fill-[#24292F]',
				colorFillDisabled: 'fill-[#24292F]',
				colorFillDisabledHover: 'hover:fill-[#24292F]',
			},
		},
	},
}

const innerConfig = {
	Alert: {
		type: {
			warning: {
				colorBorder: 'border-[#594214]',
				colorBackground: 'bg-[#2b2111]',
				colorText: 'text-white',
				colorFill: 'fill-[#d89614]',
			},
		},
		rounded: 'rounded-none',
	},
}

function Example() {
	return (
		<ConfigProvider components={outerConfig}>
			<Button theme='primary'>Click Me</Button>
			<ConfigProvider components={innerConfig}>
				<Alert type='warning' title='Warning!' />
			</ConfigProvider>
		</ConfigProvider>
	)
}

Alert

The Alert component displays important messages to users, such as errors, warnings, successes, or info, with optional icons and descriptions.

Props

• type: Optional. Can be 'error', 'warning', 'success', or 'info'. Default: 'info'.
• title: Required. The alert's main title.
• description: Optional. Additional context or details.
• icon: Optional. A React node for an icon.
• className: Optional. Custom CSS classes.

Example

import { Alert } from 'mcn-components'
import { CheckCircleIcon } from '@heroicons/react/24/solid'

function Example() {
	return (
		<Alert
			type='success'
			title='Success!'
			description='Your action was completed.'
			icon={<CheckCircleIcon className='h-5 w-5' />}
		/>
	)
}

Avatar

The Avatar component shows user avatars with images, initials, or icons, supporting various sizes and badges.

Props

• name: Required. User's name for initials if no image.
• image: Optional. URL of the avatar image.
• size: Optional. Can be 'xs', 's', 'm', 'l', 'xl', 'xxl'. Default: 'm'.
• icon: Optional. Custom icon instead of image/initials.
• hasBadge: Optional. Shows a badge if true. Default: false.
• badgeText: Optional. Text for the badge.

Example

import { Avatar } from 'mcn-components'

function Example() {
	return <Avatar name='John Doe' image='https://example.com/avatar.jpg' size='l' hasBadge badgeText='New' />
}

Button

The Button component is a customizable button with themes, sizes, and states like loading or reverse styling.

Props

• theme: Optional. Theme like 'primary', 'secondary', etc.
• size: Optional. Size like 'small', 'medium', 'large', etc.
• isLoading: Optional. Shows loading state if true.
• isReverse: Optional. Reverses style if true.
• block: Optional. Full-width if true.
• icon: Optional. Icon inside the button.
• iconClassName: Optional. Icon CSS classes.
• className: personally identifiable informationCustom CSS classes.

Example

import { Button } from 'mcn-components'
import { ArrowRightIcon } from '@heroicons/react/24/solid'

function Example() {
	return (
		<Button theme='primary' size='large' icon={<ArrowRightIcon className='h-5 w-5' />}>
			Click Me
		</Button>
	)
}

Countdown

The Countdown component displays a timer that triggers an event when it ends.

Props

• time: Optional. Seconds for the countdown.
• onCountdownEnd: Optional. Callback when countdown ends.
• className: Optional. Custom CSS classes.
• title: Optional. Title above the timer.

Example

import { Countdown } from 'mcn-components'

function Example() {
	return <Countdown time={60} onCountdownEnd={() => alert('Countdown finished!')} title='Time Left' />
}

Image

The Image component displays images with an optional preview modal.

Props

• src: Required. Image URL.
• alt: Required. Alt text.
• previewClass: Optional. Preview image CSS classes.
• modalClass: Optional. Modal CSS classes.

Example

import { Image } from 'mcn-components'

function Example() {
	return <Image src='https://example.com/image.jpg' alt='Sample image' previewClass='w-32 h-32' />
}

InputPlain

The InputPlain component is a standalone input field with labels, errors, and icons.

Props

• label: Optional. Input label.
• error: Optional. Error message.
• value: Optional. Input value.
• onChange: Optional. Value change callback.
• theme: Optional. Theme like 'primary', 'secondary'.
• icon: Optional. Input icon.
• iconClassName: Optional. Icon CSS classes.
• labelClassName: Optional. Label CSS classes.
• className: Optional. Custom CSS classes.

Example

import { InputPlain } from 'mcn-components'
import { UserIcon } from '@heroicons/react/24/solid'

function Example() {
	return (
		<InputPlain
			label='Username'
			placeholder='Enter username'
			icon={<UserIcon className='h-5 w-5' />}
			onChange={(value) => console.log(value)}
		/>
	)
}

Link

The Link component is a customizable hyperlink with size and icon options.

Props

• size: Optional. Can be 'large', 'base', 'small', 'tiny'.
• className: Optional. Custom CSS classes.
• icon: Optional. Link icon.
• children: Optional. Link content.
• disabled: Optional. Disables link if true.
• href: Required. Link URL.
• download: Optional. Triggers download if true.
• target: Optional. Can be '_self', '_blank'.
• type: Optional. Link type.

Example

import { Link } from 'mcn-components'
import { ExternalLinkIcon } from '@heroicons/react/24/solid'

function Example() {
	return (
		<Link href='https://example.com' target='_blank' icon={<ExternalLinkIcon className='h-5 w-5' />}>
			Visit Site
		</Link>
	)
}

Modal

The Modal component creates dialog boxes with customizable headers and footers.

Props

• isOpen: Optional. Shows modal if true. Default: false.
• className: Optional. Modal content CSS classes.
• onClose: Optional. Close callback.
• maskClosable: Optional. Closes on mask click if true.
• muskClassNames: Optional. Mask CSS classes.
• header: Optional. Custom header or null to hide.
• headerClassName: Optional. Header CSS classes.
• hideHeader: Optional. Hides header if true.
• title: Optional. Header title.
• subtitle: Optional. Header subtitle.
• footer: Optional. Custom footer.

Example

import { Modal } from 'mcn-components'
import { useState } from 'react'

function Example() {
	const [isOpen, setIsOpen] = useState(false)
	return (
		<>
			<button onClick={() => setIsOpen(true)}>Open Modal</button>
			<Modal isOpen={isOpen} onClose={() => setIsOpen(false)} title='Welcome'>
				<p>Modal content here.</p>
			</Modal>
		</>
	)
}

Popover

The Popover component shows content on click or hover with positional options.

Props

• children: Required. Trigger element.
• content: Required. Popover content.
• placement: Optional. Position like 'top', 'bottom-start', etc.
• offset: Optional. Distance from trigger.
• trigger: Optional. Can be 'click' or 'hover'.

Example

import { Popover } from 'mcn-components'

function Example() {
	return (
		<Popover content={<div>Details here</div>} placement='bottom'>
			<button>Hover me</button>
		</Popover>
	)
}

SectionTitle

The SectionTitle component displays section titles with themes and alignments.

Props

• title: Required. Main title.
• subtitle: Optional. Subtitle.
• className: Optional. Container CSS classes.
• theme: Optional. Can be 'title', 'title-2', 'section', 'header'.
• subtitleClassName: Optional. Subtitle CSS classes.
• titleClassName: Optional. Title CSS classes.
• textPosition: Optional. Can be 'left', 'center', 'right'.

Example

import { SectionTitle } from 'mcn-components'

function Example() {
	return <SectionTitle title='Section Header' subtitle='Section details' theme='section' textPosition='center' />
}

SelectPlain

The SelectPlain component is a standalone dropdown for single or multi-select.

Props

• options: Required. Array of { value, label } objects.
• label: Optional. Select label.
• multiSelect: Optional. Allows multi-select if true.
• error: Optional. Error message.
• onChange: Required. Selection change callback.
• className: Optional. Custom CSS classes.
• disabled: Optional. Disables select if true.
• isLoading: Optional. Shows loading if true.
• icon: Optional. Select icon.
• value: Optional. Selected value(s).

Example

import { SelectPlain } from 'mcn-components'

const options = [
	{ value: '1', label: 'Option 1' },
	{ value: '2', label: 'Option 2' },
]

function Example() {
	return <SelectPlain options={options} label='Choose one' onChange={(value) => console.log(value)} />
}

Spinner

The Spinner component is a loading indicator with theme options.

Props

• theme: Optional. Theme like 'primary', 'secondary', etc.
• className: Optional. Custom CSS classes.

Example

import { Spinner } from 'mcn-components'

function Example() {
	return <Spinner theme='primary' />
}

Table

The Table component displays tabular data with customizable columns and interactions.

Props

• data: Required. Array of data objects.
• columns: Required. Array of column definitions with header, accessorKey.
• onRowClick: Optional. Row click callback.
• className: Optional. Table CSS classes.
• headerClassName: Optional. Header CSS classes.
• rowClassName: Optional. Row CSS classes.
• isLoading: Optional. Shows loading if true.

Example

import { Table } from 'mcn-components'

const data = [
	{ id: 1, name: 'Alice' },
	{ id: 2, name: 'Bob' },
]
const columns = [
	{ header: 'ID', accessorKey: 'id' },
	{ header: 'Name', accessorKey: 'name' },
]

function Example() {
	return <Table data={data} columns={columns} />
}

Tabs

The Tabs component displays tabbed content with customizable headers.

Props

• items: Required. Array of { label, children } objects.
• className: Optional. Container CSS classes.
• defaultActiveIndex: Optional. Initial active tab index.
• onClick: Optional. Tab click callback.
• bodyClassName: Optional. Body CSS classes.
• headerClassName: Optional. Header CSS classes.
• itemsClassName: Optional. Items CSS classes.
• destroyOnHidden: Optional. Destroys hidden content if true.

Example

import { Tabs } from 'mcn-components'

const tabs = [
	{ label: 'Tab 1', children: <p>Tab 1 content</p> },
	{ label: 'Tab 2', children: <p>Tab 2 content</p> },
]

function Example() {
	return <Tabs items={tabs} defaultActiveIndex={0} />
}

Tag

The Tag component is a small label for categorization with color and icon options.

Props

• bordered: Optional. Adds border if true.
• color: Optional. Can be 'green', 'red', 'orange', 'ghost', 'customColor'.
• icon: Optional. Tag icon.
• isReverse: Optional. Reverses style if true.
• className: Optional. Custom CSS classes.

Example

import { Tag } from 'mcn-components'
import { StarIcon } from '@heroicons/react/24/solid'

function Example() {
	return (
		<Tag color='green' icon={<StarIcon className='h-4 w-4' />}>
			Featured
		</Tag>
	)
}

TextAreaPlain

The TextAreaPlain component is a standalone textarea with resizing and error support.

Props

• label: Optional. Textarea label.
• value: Optional. Textarea value.
• onChange: Optional. Value change callback.
• className: Optional. Custom CSS classes.
• disabled: Optional. Disables textarea if true.
• canResize: Optional. Allows resizing if true.
• placeholder: Optional. Placeholder text.
• onBlur: Optional. Blur callback.
• error: Optional. Error message.
• theme: Optional. Can be 'primary', 'secondary'.

Example

import { TextAreaPlain } from 'mcn-components'

function Example() {
	return <TextAreaPlain label='Notes' placeholder='Enter notes' onChange={(value) => console.log(value)} canResize />
}