Headings

Heading levels 1 through 3 for document structure.

Prop	Type	Default	Description
children	*char	-	Heading text

Live Demo

Heading Level 1

Heading Level 2

Heading Level 3

Text

Paragraph text. Renders a p element.

Prop	Type	Default	Description
children	*char	-	Text content
class	*char	-	CSS classes

Live Demo

This is a paragraph of text with default styling.

Lead

Lead paragraph. Renders a p element with larger, lighter text.

Prop	Type	Default	Description
children	*char	-	Text content

Live Demo

This is a lead paragraph used for introductory content.

Caption

Small caption text. Renders a small element.

Prop	Type	Default	Description
children	*char	-	Caption text

Live Demo

This is a small caption.

CodeText

Inline code text. Renders a code element.

Prop	Type	Default	Description
children	*char	-	Code content

Live Demo

Use

npm install chemical

to install.

Link

Anchor link. Renders an a element.

Prop	Type	Default	Description
children	*char	-	Link text
href	*char	#	URL
target	*char	-	Link target

Live Demo

Clickable Link

Button

Default button. Renders a button element.

Prop	Type	Default	Description
children	*char	-	Button label
onClick	function	-	Click handler
type	*char	button	Button type
disabled	bool	false	Disabled state
class	*char	-	CSS classes

Live Demo

Button (Primary)

Primary button variant with accent color.

Prop	Type	Default	Description
children	*char	-	Button label
onClick	function	-	Click handler
disabled	bool	false	Disabled state

Live Demo

Button (Ghost)

Ghost button with no background.

Prop	Type	Default	Description
children	*char	-	Button label
onClick	function	-	Click handler

Live Demo

Button (Outline)

Outlined button with border only.

Prop	Type	Default	Description
children	*char	-	Button label
onClick	function	-	Click handler

Live Demo

Button (Danger)

Danger button with red accent.

Prop	Type	Default	Description
children	*char	-	Button label
onClick	function	-	Click handler

Live Demo

Button (Success)

Success button with green accent.

Prop	Type	Default	Description
children	*char	-	Button label
onClick	function	-	Click handler

Live Demo

Button (Small)

Small button variant.

Prop	Type	Default	Description
children	*char	-	Button label
onClick	function	-	Click handler

Live Demo

Button (Large)

Large button variant.

Prop	Type	Default	Description
children	*char	-	Button label
onClick	function	-	Click handler

Live Demo

IconButton

Circular icon button. Renders a button with an icon.

Prop	Type	Default	Description
children	*char	-	Icon content
onClick	function	-	Click handler
label	*char	-	Accessible label

Live Demo

Fab

Floating action button. Renders a fixed-position circular button.

Prop	Type	Default	Description
children	*char	-	Button content
onClick	function	-	Click handler

Live Demo

Input

Text input field. Renders an input element.

Prop	Type	Default	Description
placeholder	*char	-	Placeholder text
value	*char	-	Input value
type	*char	text	Input type
disabled	bool	false	Disabled state
class	*char	-	CSS classes

Live Demo

TextArea

Multi-line text input. Renders a textarea element.

Prop	Type	Default	Description
placeholder	*char	-	Placeholder text
value	*char	-	Textarea value
rows	int	4	Visible rows

Live Demo

Select

Dropdown select. Renders a select element.

Prop	Type	Default	Description
children	*char	-	Option elements
value	*char	-	Selected value
disabled	bool	false	Disabled state

Live Demo

Input (Filled)

Input with filled background variant.

Prop	Type	Default	Description
placeholder	*char	-	Placeholder text
value	*char	-	Input value

Live Demo

Input (Success)

Input with success state styling.

Prop	Type	Default	Description
placeholder	*char	-	Placeholder text
value	*char	-	Input value

Live Demo

Input (Error)

Input with error state styling.

Prop	Type	Default	Description
placeholder	*char	-	Placeholder text
value	*char	-	Input value

Live Demo

Input (Ghost)

Input with ghost (borderless) style.

Prop	Type	Default	Description
placeholder	*char	-	Placeholder text
value	*char	-	Input value

Live Demo

Input (Small)

Small-sized input field.

Prop	Type	Default	Description
placeholder	*char	-	Placeholder text
value	*char	-	Input value

Live Demo

Input (Large)

Large-sized input field.

Prop	Type	Default	Description
placeholder	*char	-	Placeholder text
value	*char	-	Input value

Live Demo

Input (Disabled)

Disabled input field.

Prop	Type	Default	Description
placeholder	*char	-	Placeholder text
value	*char	-	Input value
disabled	bool	true	Disabled state

Live Demo

Field

Form field wrapper with label. Renders a labeled input group.

Prop	Type	Default	Description
label	*char	-	Field label
children	*char	-	Input element
error	*char	-	Error message
hint	*char	-	Hint text

Live Demo

Checkbox

Checkbox input. Renders a checkbox with label.

Prop	Type	Default	Description
children	*char	-	Checkbox label
checked	bool	false	Checked state
onClick	function	-	Click handler
name	*char	-	Input name

Live Demo

Enable notifications

Radio

Radio button. Renders a radio input with label.

Prop	Type	Default	Description
children	*char	-	Radio label
checked	bool	false	Checked state
onClick	function	-	Click handler
name	*char	-	Input name

Live Demo

Option A

Option B

Switch

Toggle switch. Renders a switch component.

Prop	Type	Default	Description
children	*char	-	Switch label
checked	bool	false	Checked state
onClick	function	-	Click handler

Live Demo

Dark mode

Progress

Progress bar. Renders a progress indicator.

Prop	Type	Default	Description
value	*char	0	Progress percentage
size	*char	md	Progress bar size

Live Demo

Accordion

Accordion container. Wraps AccordionItem elements.

Prop	Type	Default	Description
children	*char	-	AccordionItems
multiple	bool	false	Allow multiple open

Live Demo

Section 1 null +

Content one

Section 2 null +

Content two

AccordionItem

Single accordion panel with header and body.

Prop	Type	Default	Description
title	*char	-	Panel title
children	*char	-	Panel content
subtitle	*char	-	Panel subtitle
open	bool	false	Open state

Live Demo

Accordion Item Subtitle +

Content here

Tabs

Tabbed interface. Renders a tab bar with panels.

Prop	Type	Default	Description
children	*char	-	Tab and panel elements

Live Demo

Content for Tab 1 — this panel is visible when Tab 1 is active.

Pagination

Page navigation. Renders pagination controls.

Prop	Type	Default	Description
current	int	1	Current page
total	int	1	Total pages
onChange	function	-	Page change handler

Live Demo

List

List container. Renders a ul/ol element.

Prop	Type	Default	Description
children	*char	-	List items
ordered	bool	false	Ordered list

Live Demo

Item one

Item two

Item three

Table

Data table. Renders a table element.

Prop	Type	Default	Description
children	*char	-	Table content
striped	bool	false	Striped rows
hoverable	bool	false	Hover effect

Live Demo

Name	Role
Alice	Admin

Card

Content card. Renders a card container.

Prop	Type	Default	Description
children	*char	-	Card content
title	*char	-	Card title
subtitle	*char	-	Card subtitle

Live Demo

This is the card body content.

StatCard

Statistics card. Renders a card with a label and value.

Prop	Type	Default	Description
label	*char	-	Statistic label
value	*char	-	Statistic value
icon	*char	-	Icon name
trend	*char	-	Trend indicator

Live Demo

Paper

Surface container. Renders a div with elevation.

Prop	Type	Default	Description
children	*char	-	Content
elevation	int	1	Shadow depth
rounded	*char	md	Border radius

Live Demo

This is a paper surface with elevation.

AppBar

Top app bar. Renders a header navigation bar.

Prop	Type	Default	Description
children	*char	-	App bar content
title	*char	-	App bar title

Live Demo

Application

Drawer

Side drawer. Renders a slide-out panel.

Prop	Type	Default	Description
children	*char	-	Drawer content
open	bool	false	Open state
side	*char	left	Drawer side

Live Demo

Prop	Type	Default	Description
children	*char	-	Menu items

Popover

Popover overlay. Renders a positioned popup.

Prop	Type	Default	Description
children	*char	-	Popover content
open	bool	false	Open state
position	*char	bottom	Popover position

Live Demo

Popover content placed below the trigger area.

Dialog

Modal dialog. Renders a centered modal.

Prop	Type	Default	Description
children	*char	-	Dialog content

Live Demo

Dialog Title

This is a dialog with some content.

Snackbar

Toast notification. Renders a snackbar message.

Prop	Type	Default	Description
children	*char	-	Snackbar message
open	bool	true	Visible state
variant	*char	info	Snackbar variant

Live Demo

Tooltip

Tooltip overlay. Renders a hover tooltip.

Prop	Type	Default	Description
children	*char	-	Trigger element
text	*char	-	Tooltip text
position	*char	top	Tooltip position

Live Demo

BottomBar

Bottom navigation bar. Renders a bottom bar.

Prop	Type	Default	Description
children	*char	-	Navigation items

Live Demo

EmptyState

Empty state placeholder. Renders an empty state message.

Prop	Type	Default	Description
title	*char	-	Empty state title
children	*char	-	Description text
icon	*char	-	Icon name

Live Demo

Try adjusting your search criteria.

Alert

Default alert. Renders an alert banner.

Prop	Type	Default	Description
children	*char	-	Alert message
icon	*char	-	Icon name
dismissible	bool	false	Show dismiss button

Live Demo

This is an informational alert.

Alert (Accent)

Alert with accent border styling.

Prop	Type	Default	Description
children	*char	-	Alert message
icon	*char	-	Icon name
dismissible	bool	false	Show dismiss button

Live Demo

This is an accent alert with left border.

Alert (Success)

Success alert with green styling.

Prop	Type	Default	Description
children	*char	-	Alert message
icon	*char	-	Icon name
dismissible	bool	false	Show dismiss button

Live Demo

Operation completed successfully!

Alert (Error)

Error alert with red styling.

Prop	Type	Default	Description
children	*char	-	Alert message
icon	*char	-	Icon name
dismissible	bool	false	Show dismiss button

Live Demo

Something went wrong. Please try again.

Badge

Notification badge. Renders a small badge.

Prop	Type	Default	Description
children	*char	-	Badge content
variant	*char	default	Badge variant

Live Demo

New

Chip

Chip/tag element. Renders a compact chip.

Prop	Type	Default	Description
children	*char	-	Chip label
onClose	function	-	Close handler
variant	*char	filled	Chip variant

Live Demo

React

TypeScript

Avatar

User avatar. Renders a circular avatar.

Prop	Type	Default	Description
children	*char	-	Initials or image
src	*char	-	Image source
size	*char	md	Avatar size

Live Demo

JD

Kbd

Keyboard key. Renders a kbd element.

Prop	Type	Default	Description
children	*char	-	Key label

Live Demo

Ctrl

+

C

Divider

Visual divider. Renders a horizontal rule.

Prop	Type	Default	Description
-	-	-	No props required

Live Demo

Icon

Icon element. Renders an SVG icon.

Prop	Type	Default	Description
name	*char	-	Icon identifier
size	*char	md	Icon size

Live Demo

Headings

Heading Level 1

Heading Level 2

Heading Level 3

Text

Lead

Caption

CodeText

Link

Button

Button (Primary)

Button (Ghost)

Button (Outline)

Button (Danger)

Button (Success)

Button (Small)

Button (Large)

IconButton

Fab

Input

TextArea

Select

Input (Filled)

Input (Success)

Input (Error)

Input (Ghost)

Input (Small)

Input (Large)

Input (Disabled)

Field

Checkbox

Radio

Switch

Progress

Accordion

AccordionItem

Tabs

Pagination

List

Table

Card

StatCard

Paper

AppBar

Drawer

Menu

Popover

Dialog

Snackbar

Tooltip

BottomBar

EmptyState

Alert

Alert (Accent)

Alert (Success)

Alert (Error)

Badge

Chip

Avatar

Kbd

Divider

Icon