Headings

Heading levels H1 through H6 for document structure.

Usage

Import and use heading components directly.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Dynamic Level

Use Heading with a levelprop to render the correct tag dynamically.

Dynamic Level 1

Dynamic Level 3

Dynamic Level 6

API Reference

Prop	Type	Default	Description
level	int	1	Heading level (1-6)
className	string	-	Additional CSS classes
children	any	-	Heading content

Text

Paragraph text with optional muted style and polymorphic rendering.

Basic

The quick brown fox jumps over the lazy dog.

Muted

Use mutedprop for secondary text.

This is muted secondary text.

As Element

Render as p, span, or divusing the asprop.

Default paragraph

Rendered as span

Rendered as div

API Reference

Prop	Type	Default	Description
as	string	p	HTML tag (p, span, div)
muted	bool	false	Muted secondary style
children	any	-	Content

Lead

Larger paragraph text for introductions and subtitles.

Basic

Build beautiful, accessible web applications with Chemical components.

As Element

Use the asprop to render as different HTML elements.

Rendered as div

Rendered as span

API Reference

Prop	Type	Default	Description
as	string	p	HTML tag (p, div, span)
children	any	-	Content

Caption

Small helper text for metadata and supporting copy.

Basic

Last updated 2 minutes ago

Muted

Use mutedprop for secondary text.

Default caption

Muted caption

As Element

Render as different HTML elements.

Default

Span

Div

API Reference

Prop	Type	Default	Description
as	string	p	HTML tag (p, span, div)
muted	bool	false	Muted secondary style
children	any	-	Content

CodeText

Inline code for technical references.

Basic

Run npm installto get started.

In Paragraph

Use CodeTextto highlight inline code within text.

Install the package using npm install chemical-componentsor yarn add chemical-components.

As Element

Default (code)keyboard

API Reference

Prop	Type	Default	Description
as	string	code	HTML tag (code, kbd)
children	any	-	Content

Link

Styled anchor link for navigation.

Basic

Click here

External

Use target="_blank"for external links.

GitHub

Variants

DefaultUnderlineMuted

API Reference

Prop	Type	Default	Description
href	string	-	Link URL
target	string	-	Link target (_blank, _self)
variant	string	default	default \| underline \| muted
children	any	-	Link text

Blockquote

Styled block quotation with optional citation.

Basic

The Analytical Engine weaves algebraic patterns just as the Jacquard loom weaves flowers and leaves.Ada Lovelace

Without Citation

Blockquotes work without the citeattribute.

The best way to predict the future is to invent it.

As Element

Render as different elements.

Default blockquote

Div blockquote

API Reference

Prop	Type	Default	Description
cite	string	-	Citation source
as	string	blockquote	HTML tag
children	any	-	Quote content

Button

Displays a button or a component that looks like a button.

Basic

Use the variantprop to change the button style.

<Button>Default</Button> <Button variant="secondary">Secondary</Button> <Button variant="destructive">Destructive</Button>

Additional Variants

Extended variants for success, warning, info, and accent tones.

Size

Use the sizeprop to change the button size.

Disabled

Use the disabledprop to disable the button.

Loading

Use the loadingprop to show a loading state with a spinner.

With Icon

Combine with Iconor Fabfor icon buttons.

As Child

Use asChildto render as a different element while keeping button styles.

Composition

Buttons work great with other components for common patterns.

API Reference

Prop	Type	Default	Description
variant	string	default	default \| secondary \| destructive \| outline \| ghost \| link \| success \| warning \| info \| accent
size	string	default	sm \| default \| lg \| icon
disabled	bool	false	Disabled state
loading	bool	false	Loading state
type	string	button	button \| submit \| reset
onClick	function	-	Click handler
ariaLabel	string	-	Accessible label
children	any	-	Button content

Input

Text input field with variant, size, and state support.

Basic

Variant

Use the variantprop to change the input style.

Size

Type

Use the typeprop for different input types.

Disabled

With Label

Wrap in Fieldfor label, hint, and error.

EmailWe'll never share your email. PasswordPassword must be at least 8 characters.

Textarea

API Reference

Prop	Type	Default	Description
variant	string	default	default \| filled \| ghost \| error \| success
size	string	default	sm \| default \| lg
type	string	text	text \| email \| number \| password \| search
disabled	bool	false	Disabled state
placeholder	string	-	Placeholder text
value	string	-	Input value
onChange	function	-	Change handler
ariaLabel	string	-	Accessible label

Textarea

Multi-line text input with variant and size support.

Basic

With Rows

Use rowsto set initial height.

Disabled

With Label

Wrap in Fieldfor label and hint.

MessageMax 500 characters.

Size

API Reference

Prop	Type	Default	Description
rows	int	3	Number of visible rows
size	string	default	sm \| default \| lg
disabled	bool	false	Disabled state
placeholder	string	-	Placeholder text
value	string	-	Textarea value
onChange	function	-	Change handler

Select

Custom dropdown listbox with keyboard navigation, portal positioning, and WAI-ARIA pattern.

Basic

Disabled

Size

Default Value

Keyboard: ArrowUp/Down, Home/End, Enter to select, Escape to close, type to search.

API Reference

Prop	Type	Default	Description
options	string[]	-	Array of option strings
defaultValue	string	-	Initial selected value
value	string	-	Controlled value
placeholder	string	Select...	Placeholder text
disabled	bool	false	Disabled state
size	string	default	sm \| default \| lg
onValueChange	function	-	Selection change callback

Native Select

Native HTML select element with component styling.

Basic

Disabled

Size

With Label

Country

API Reference

Prop	Type	Default	Description
placeholder	string	Select...	Placeholder text
disabled	bool	false	Disabled state
children	any	-	Option elements

Field

Form field wrapper with label, hint, and error text for accessible form layouts.

Basic

UsernameMust be unique.

Error State

Use FieldErrorwith variant="error"on the Input.

EmailInvalid email address.

With Select

Fields wrap any form control — Input, Select, Textarea, Switch, etc.

Country

Pick your country.

Required

Full NameRequired field.

API Reference

Component	Prop	Type	Description
Field	children	any	Field content (label, input, hint, error)
FieldLabel	children	any	Label text
FieldHint	children	any	Helper text below input
FieldError	children	any	Error message text

Checkbox

Toggle control for boolean values.

Basic

Accept terms

Default Checked

Use checkedprop for initial state.

Already checked

Disabled

Disabled Disabled checked

Size

Small Default Large

API Reference

Prop	Type	Default	Description
checked	bool	false	Initial checked state
disabled	bool	false	Disabled state
size	string	default	sm \| default \| lg
onChange	function	-	Change callback
children	any	-	Label content

Radio

Single selection from a set of options.

Basic

Option A Option B Option C

Disabled

Disabled Disabled checked

Size

Small Default Large

API Reference

Prop	Type	Default	Description
name	string	-	Radio group name
checked	bool	false	Initial checked state
disabled	bool	false	Disabled state
size	string	default	sm \| default \| lg
onChange	function	-	Change callback
children	any	-	Label content

Switch

Toggle between two states.

Basic

Airplane Mode Notifications

Disabled

Disabled off Disabled on

Size

Small Default Large

In Settings

Switches work naturally in settings panels with labels.

Dark Mode

Notifications

Auto-save

API Reference

Prop	Type	Default	Description
checked	bool	false	Initial checked state
disabled	bool	false	Disabled state
size	string	default	sm \| default \| lg
onChange	function	-	Change callback
children	any	-	Label content

Toggle Group

A set of toggle buttons with single or multiple selection.

Single

Only one item can be pressed at a time.

Multiple

Multiple items can be pressed simultaneously.

Disabled

Variant

Use variantprop for different styles.

API Reference

Prop	Type	Default	Description
type	string	single	single \| multiple
defaultValue	string	-	Initial value
variant	string	default	default \| outline \| ghost
size	string	default	sm \| default \| lg
disabled	bool	false	Disabled state
onValueChange	function	-	Value change callback

Radio Group

Mutually-exclusive radio options with context-based selection.

Basic

Free Pro Enterprise

Direction

Use direction="row"for horizontal layout.

Small Medium Large

Disabled

Disabled A Disabled B

With Description

Combine with Fieldfor labels and descriptions.

Free

muted

Pro

Best for teams

API Reference

Prop	Type	Default	Description
name	string	-	Radio group name
defaultValue	string	-	Initial value
direction	string	column	column \| row
disabled	bool	false	Disabled state
onValueChange	function	-	Value change callback

Slider

Horizontal slider with draggable thumb and keyboard support.

Basic

Range

Use min, max, and stepprops.

Disabled

Step

Use stepto control increment precision.

API Reference

Prop	Type	Default	Description
defaultValue	number	0	Initial value
min	number	0	Minimum value
max	number	100	Maximum value
step	number	1	Increment step
disabled	bool	false	Disabled state
ariaLabel	string	-	Accessible label

Dialog

A modal overlay with focus trap, inert background, and Escape to close.

Basic

Click the button below to open a dialog. Press Escapeor click the backdrop to close.

Dialog traps focus inside and makes the background inert.

Composition

Use Dialog, DialogBackdrop, DialogContent, DialogHeader, and DialogActionstogether for full control.

Controlled

Use openprop to control visibility from parent state.

Custom Width

Set width via inline style on DialogContent.

Custom Close Button

Add an explicit close button inside DialogActions.

Alert Dialog

Use for destructive actions that require confirmation.

Are you sure?

This action cannot be undone.

Accessibility

Dialog automatically handles accessibility features:

Focus Trap

Tab cycles through focusable elements

Escape Key

Press Escape to close

Inert Background

Background content is not interactive

ARIA Labels

Use ariaLabel for screen readers

Composition Pattern

Combine Dialog, DialogBackdrop, DialogContent, DialogHeader, DialogTitle, DialogDescription, and DialogFooterfor full control.

Dialog

Controls open state and focus trap

DialogBackdrop

Click to close overlay

DialogContent

Modal content container with close button

DialogHeader

Title + description wrapper

DialogFooter

Action buttons row

API Reference

Prop	Type	Default	Description
open	bool	-	Controlled visibility
defaultOpen	bool	false	Uncontrolled initial state
ariaLabel	string	-	Accessible name
onClose	function	-	Dismiss callback

Sheet

Modal panel that slides in from an edge of the screen.

Right (Default)

Sheet slides in from the right edge by default. Click the button to open.

All Sides

Use the sideprop to choose the edge: left, right, top, or bottom.

With Title

Pass titleto set the header text and aria-label for accessibility.

The sheet header displays the title and provides an accessible name for screen readers.

API Reference

Prop	Type	Default	Description
side	string	right	left \| right \| top \| bottom
title	string	-	Header title + aria-label
open	bool	-	Controlled visibility
onClose	function	-	Dismiss callback

Alert

Displays a callout for user attention.

Basic

Heads up

You can add components to your app.

Destructive

Use variant="error"for destructive alerts.

Error

Your payment could not be processed.

Variants

Success

Changes saved successfully.

Warning

Your subscription expires soon.

Accent

New feature available.

Dismissible

Use dismissibleto add a close button.

Dismissible

Click the X to close this alert.

API Reference

Prop	Type	Default	Description
variant	string	default	default \| info \| success \| error \| warning \| accent
title	string	-	Alert title
description	string	-	Alert description
dismissible	bool	false	Show close button
onDismiss	function	-	Dismiss callback

Badge

Small label for status, categories, and counts.

Variants

DefaultSecondaryAccentSuccessErrorWarningInfoOutlineGhostLink

Size

XSSMDefaultLG

With Icon

Badges can contain icons for additional context.

✓ Active✕ Inactive⚠ Warning

API Reference

Prop	Type	Default	Description
variant	string	default	default \| secondary \| accent \| success \| error \| warning \| info \| outline \| ghost \| link
size	string	default	xs \| sm \| default \| lg
children	any	-	Badge content

Avatar

User profile image with fallback text.

Size

XS SM MD LG XL

Bordered

BD BD

Status Badge

Use AvatarBadgeto show online/offline status.

A B

Group

A B C

More Count

A B +5

API Reference

Prop	Type	Default	Description
size	string	default	xs \| sm \| default \| lg \| xl
bordered	bool	false	Add border
src	string	-	Image URL
children	any	-	Fallback text

Card

Container for content with header, body, and footer sections.

Basic

Create project

Deploy your new project in one-click.

New

Interactive

Cards support onClickfor clickable regions.

Click this card

Title Level

Level 2

Level 3 (default)

Level 4

Size

Use size="sm"for compact cards.

Compact Card

Smaller padding and spacing.

Default Card

Standard padding and spacing.

API Reference

Component	Prop	Type	Default	Description
Card	size	string	default	sm \| default
Card	onClick	function	-	Click handler
CardTitle	level	int	3	Heading level (2-6)

Accordion

A vertically stacked set of interactive headings that each reveal a section of content.

Basic

Each AccordionItemmanages its own open state via the triggerprop and defaultOpen.

Is it accessible?

Yes. It adheres to the WAI-ARIA design pattern.

What is Chemical?

Is it fast?

Default Open

Use defaultOpento start an item expanded.

Open by default

This content is visible on page load.

Closed by default

Multiple Open

Each item manages its own state independently. Multiple items can be open at the same time.

First item

Content A is visible.

Second item

Content B is also visible.

Third item

Disabled

Use the disabledprop on AccordionItem to disable individual items.

Enabled

Disabled

API Reference

Component	Prop	Type	Default	Description
Accordion	multiple	bool	false	Allow multiple items open
Accordion	children	any	-	Accordion items
AccordionItem	value	string	-	Unique identifier
AccordionItem	trigger	string	-	Trigger label
AccordionItem	defaultOpen	bool	false	Initially open
AccordionItem	disabled	bool	false	Disabled state

Tabs

Tabbed interface with keyboard navigation and ARIA labels.

Basic

Overview content goes here.

Variant

Use variantfor different tab styles: line(default) or pills.

Line panel 1.

Pill panel 1.

Disabled

Use disabledTabsto disable specific tabs by index.

Active content.

Default Tab

Use defaultIndexto select the initially active tab.

Third panel.

Two Tabs

Works with as few as two tabs.

Edit your profile information.

Keyboard: ArrowLeft/Right to move, Home/End to jump, roving tabindex.

API Reference

Prop	Type	Default	Description
tabs	string[]	-	Tab label strings
panels	string[]	-	Panel content strings
defaultIndex	int	0	Initially active tab index
ariaLabel	string	-	Accessible label
variant	string	line	line \| pills
disabledTabs	int[]	-	Indices of disabled tabs

Collapsible

A toggle to show and hide content.

Basic

Default Open

This content is visible by default.

Disabled

Nested Content

Collapsible can contain any content — text, lists, or other components.

API Reference

Prop	Type	Default	Description
trigger	string	-	Trigger button label
defaultOpen	bool	false	Initially open
disabled	bool	false	Disabled state

Progress

Shows completion progress of a task.

Basic

Variants

Size

API Reference

Prop	Type	Default	Description
value	number	0	Progress percentage (0-100)
variant	string	default	primary \| success \| warning \| error \| info
size	string	default	sm \| default \| lg

Pagination

Page navigation with prev/next controls.

Basic

Custom Labels

Many Pages

Default Page

Use defaultPageto set the initially active page.

API Reference

Prop	Type	Default	Description
pages	number[]	-	Page numbers
defaultPage	int	1	Initially active page
prevLabel	string	-	Previous button label
nextLabel	string	-	Next button label

Toast

Notification popup with auto-dismiss, variants, and action buttons.

Interactive

Click a button to trigger a toast notification. They auto-dismiss after 4 seconds.

Variants (Static)

Saved

Changes were saved.

Success

Action completed.

Error

Something went wrong.

Info

New update available.

Warning

Disk space low.

Action Button

Pass actionto add a clickable action button to the toast.

Undo

Action was performed.

Undo

API Reference

Prop	Type	Default	Description
variant	string	default	default \| success \| destructive \| info \| warning
title	string	-	Toast title
description	string	-	Toast description
duration	int	4000	Auto-dismiss ms (0 = no dismiss)
action	string	-	Action button label

Tooltip

Hover-triggered informational popup with configurable positioning.

Basic

Hover over the button to see the tooltip.

Positions

Use the positionprop to control where the tooltip appears.

On Icon Buttons

Tooltips are essential for icon-only buttons to convey meaning.

On Badges

Online Pending

Tooltip uses TooltipProvider, TooltipTrigger, and TooltipContentfor composition.

API Reference

Prop	Type	Default	Description
label	string	-	Tooltip text content
position	string	top	top \| bottom \| left \| right
delay	int	200	Hover delay in ms
content	string	-	Alias for label
children	any	-	Trigger element

Table

Data table with header, body, and cell components. Tables should be placed inside a #universalcomponent to avoid hydration wrapper issues with table elements.

Basic

Name	Status	Score
Alpha	Active	95
Beta	Pending	82
Gamma	Inactive	71

With Badges

Combine with Badgefor status indicators.

User	Role	Status
Alice	Admin	Active
Bob	Editor	Pending
Carol	Viewer	Invited

Compact

Use smaller padding for dense data display.

ID	Name	Email	Plan
1	Acme Corp	hi@acme.com	Pro
2	Globex	info@globex.com	Free
3	Initech	admin@initech.com	Pro
4	Hooli	team@hooli.com	Enterprise

Wrap tables in a #universalcomponent. The hydration system wraps each component in a span element which can break table element layout.

API Reference

Component	Prop	Type	Description
Table	children	any	Table content (thead, tbody)
TableHeadCell	children	any	Column header content
TableCell	children	any	Cell content

List

Styled list of items.

Basic

First item

Second item

Third item

Unordered

Unordered 1

Unordered 2

API Reference

Prop	Type	Default	Description
type	string	ol	ol \| ul
children	any	-	List items

Separator

Visual divider between content sections.

Horizontal

Above

Below

Vertical

Left

Right

Styled

Customize with CSS classes.

Above

Below

API Reference

Prop	Type	Default	Description
orientation	string	horizontal	horizontal \| vertical
className	string	-	Additional CSS classes

Skeleton

Loading placeholder with shimmer animation.

Basic

Circle

Card Loading

Use skeletons to simulate loading content.

API Reference

Prop	Type	Default	Description
width	string	100%	Width (CSS value)
height	string	20px	Height (CSS value)
circle	bool	false	Render as circle

Spinner

Loading indicator with role=status for accessibility.

Size

With Label

Color

Use CSS to customize the spinner color.

API Reference

Prop	Type	Default	Description
size	string	default	sm \| default \| lg
label	string	-	Accessible label

Kbd

Keyboard shortcut indicator.

Basic

CtrlShiftK

Shortcut Combinations

Display keyboard shortcuts with multiple keys.

CtrlC

Copy

CtrlV

Paste

CtrlZ

Undo

API Reference

Prop	Type	Default	Description
children	any	-	Key label

Icon

Styled icon container.

Basic

+?i

Size

+++

In Button

Icons are commonly used inside buttons.

API Reference

Prop	Type	Default	Description
size	string	default	sm \| default \| lg
children	any	-	Icon content

Divider

Horizontal rule divider.

Basic

Above

Below

Styled

Customize with CSS classes.

Default

Styled

Thick

API Reference

Prop	Type	Default	Description
className	string	-	Additional CSS classes
style	string	-	Inline styles

Breadcrumb

Navigation breadcrumb trail.

Basic

With Icons

Add icons to breadcrumb links for visual context.

Collapsed

Use BreadcrumbEllipsisfor long trails.

API Reference

Prop	Type	Default	Description
separator	string	/	Separator character
children	any	-	Breadcrumb items

Container

Centered content wrapper with max-width breakpoints.

Sizes

sm (40rem)

md (48rem)

default (80rem)

full (no max)

Centered Content

Containers center their content with auto margins.

This content is centered and has a max-width.

API Reference

Prop	Type	Default	Description
size	string	default	sm \| md \| default \| full
children	any	-	Content

Stack

Flexbox layout primitive with direction, gap, and alignment.

Direction

ABC

Justify Between

LeftRight

Vertical Stack

FirstSecondThird

API Reference

Prop	Type	Default	Description
direction	string	column	row \| column
gap	string	md	sm \| md \| lg
justify	string	start	start \| center \| end \| between
align	string	stretch	start \| center \| end \| stretch
children	any	-	Content

Grid

CSS Grid layout primitive.

Columns

1

2

3

2 Columns

A

B

4 Columns

1

2

3

4

API Reference

Prop	Type	Default	Description
cols	string	1	Number of columns (1-6)
gap	string	md	sm \| md \| lg
children	any	-	Grid items

Paper

Elevated surface container with border and shadow.

Basic

Paper content with border and shadow.

With Header

Paper Title

Paper with header and body content.

API Reference

Prop	Type	Default	Description
children	any	-	Content

AppBar

Horizontal navigation bar with branding, links, and actions.

Basic

My App

With Navigation

Combine with navigation links and actions.

Dashboard

With Search

Include a search input in the app bar.

Dashboard

With Badge

Add notification badges to app bar actions.

App

A

API Reference

Prop	Type	Default	Description
children	any	-	AppBar content

Drawer

Side panel for navigation or settings with header, body, and footer sections.

Basic

With Header

Use a header section for title and description.

With Search

Drawer with search and navigation items.

API Reference

Prop	Type	Default	Description
children	any	-	Drawer content

Popover

Floating surface for contextual content with portal rendering and click-outside-to-close.

Basic

Popover

Contextual content here.

With Form

Popovers work well for forms and inputs.

Settings

With Rich Content

Popovers can contain any content — cards, lists, or nested components.

A

Alice Smith

alice@example.com

Popover uses PopoverHeader, PopoverTitle, PopoverDescription, and PopoverContentfor composition.

API Reference

Prop	Type	Default	Description
trigger	string	-	Trigger label for click mode
side	string	bottom	top \| bottom \| left \| right
children	any	-	Popover content

Snackbar

Inline status notification with action buttons and variants.

Basic

Saved

Changes written to disk.

With Action

Add action buttons for user interaction.

Message sent.

Error Snackbar

Use error styling for failure notifications.

Error

Failed to save. Try again.

With Icon

check

File uploaded successfully.

API Reference

Prop	Type	Default	Description
children	any	-	Snackbar content

Bottom Bar

Mobile navigation bar for app shells with icon buttons and labels.

Basic

With Labels

Add text labels below icons for clarity.

With Badge

Add notification badges to bottom bar items.

API Reference

Prop	Type	Default	Description
children	any	-	Bottom bar items

Empty State

Placeholder when no data is available.

Basic

No results

Try adjusting your search filters.

With Icon

Add an icon for visual context.

📭

Inbox empty

No messages yet. Start a conversation!

With Action

No projects

Create your first project to get started.

API Reference

Prop	Type	Default	Description
children	any	-	Empty state content

Stat Card

Compact metric display card.

Basic

Revenue

$12,345

+12%

Variants

Different stat types for various metrics.

Users

1,234

+8%

Orders

567

-3%

API Reference

Prop	Type	Default	Description
children	any	-	Stat content

Form Patterns

Complete form examples showing how components work together.

Login Form

A complete login form using Input, Button, and Field components.

Login

Email PasswordMust be at least 8 characters

Registration Form

A registration form with validation states and multiple input types.

Create Account

Full Name Email Password Confirm Password

Accept terms and conditions

Settings Form

A settings form using Switch, Select, and other controls.

Settings

Dark Mode

Notifications

Language

Theme

Light Dark System

Feedback Form

A feedback form with textarea and rating.

Send Feedback

Rating

5 4 3 2 1

Comments

Search Form

A search form with input and filters.

AllArticlesUsersTags

Composition Guide

Common patterns for combining form components:

Field

Wraps Input with label, hint, and error

Card

Groups related form controls

Stack

Controls vertical spacing between fields

Grid

Arranges fields in columns