@atlantum/react

@atlantum/react

React component library for the AtlantumUI design system.

Installation

npm i @atlantum/react
# or
pnpm add @atlantum/react

Peer dependencies:

npm i react react-dom @atlantum/core

Setup

Import the base tokens from @atlantum/core once at the entry point of your app:

import "@atlantum/core/foundation.css";

Wrap your app with AtlantumUIProvider (from @atlantum/utils) if you need theme switching or token overrides.

Components

Button

import { Button } from "@atlantum/react";

<Button appearance="filled" size="md" onClick={handleClick}>
  Label
</Button>

Prop	Type	Default
appearance	"filled" | "outlined" | "ghost"	"filled"
size	"sm" | "md" | "lg"	"md"
iconBefore	ReactNode	—
iconAfter	ReactNode	—
disabled	boolean	false

---

ButtonIcon

Icon-only button with the same appearance and size axes as Button.

import { ButtonIcon } from "@atlantum/react";
import { StarIcon } from "@atlantum/icons";

<ButtonIcon appearance="outlined" size="md" aria-label="Favourite">
  <StarIcon />
</ButtonIcon>

---

ActionButton

Compact action trigger without a visible label, intended for toolbar or list-row actions.

import { ActionButton } from "@atlantum/react";
import { EditIcon } from "@atlantum/icons";

<ActionButton appearance="ghost" size="sm" aria-label="Edit">
  <EditIcon />
</ActionButton>

---

Accordion

Collapsible section with heading, optional description, and expandable panel.

import { Accordion } from "@atlantum/react";

<Accordion
  title="Title"
  description="Events: 32"
  titleSize="h5"
  border
  defaultExpanded={false}
>
  <p>Panel content</p>
</Accordion>

Prop	Type	Default
title	string	—
description	string	—
titleSize	"h6" | "h5" | "h3"	"h5"
border	boolean	true
expanded	boolean	—
defaultExpanded	boolean	false
onExpandedChange	(expanded: boolean) => void	—
disabled	boolean	false
fullWidth	boolean	false

---

Counter

Compact numeric indicator for counts and notifications.

import { Counter } from "@atlantum/react";

<Counter count={32} appearance="primary" aria-label="32 events" />

Prop	Type	Default
count	number	1
appearance	"neutral" | "info" | "success" | "primary" | "accent" | "warning" | "danger"	"neutral"
aria-label	string	—

Values above 99 are displayed as 99+.

---

Chip

Compact interactive label for navigation, filters, and removable tags.

import { Chip } from "@atlantum/react";

<Chip text="Label" iconBefore="star" count={2} closable onClose={handleRemove} onClick={handleClick} />

Prop	Type	Default
text	string	—
size	"base" | "large"	"base"
iconBefore	IconSlot	—
count	number	—
closable	boolean	false
onClose	() => void	—
onClick	(event) => void	—
as	ElementType	—
href	string	—
disabled	boolean	false

---

Tooltip

Contextual hint shown on hover or focus. Wraps a single trigger element.

import { Tooltip } from "@atlantum/react";

<Tooltip text="Какой-то короткий текст" placement="bottom-center">
  <Button text="Наведи" />
</Tooltip>

Prop	Type	Default
text	string	—
children	ReactElement	—
placement	PlacementAll	"bottom-center"
open	boolean	—
defaultOpen	boolean	false
onOpen	() => void	—
onClose	() => void	—
disabled	boolean	false
maxWidth	string	"320px"

---

Label

Form field label with optional required indicator.

import { Label } from "@atlantum/react";

<Label text="Email" htmlFor="email" required />

Prop	Type	Default
text	string	—
required	boolean	false
disabled	boolean	false
htmlFor	string	—

---

InputText

Single-line text field with label, validation, description, and clear button.

import { InputText } from "@atlantum/react";

<InputText
  label="Email"
  placeholder="you@example.com"
  validationStatus="error"
  validationMessage="Required"
  clearable
/>

Prop	Type	Default
label	string	—
description	string	—
placeholder	string	—
value / defaultValue	string	—
onChange	(event) => void	—
validationStatus	"default" | "success" | "error" | "warning" | "info"	"default"
validationMessage	string	—
size	"small" | "base" | "large"	"base"
iconBefore / iconAfter	IconSlot	—
clearable	boolean	false
onClear	() => void	—
disabled	boolean	false
readOnly	boolean	false
required	boolean	false
fullWidth	boolean	false
width	string	—

---

HelpMessage

Inline validation / description message for form fields.

import { HelpMessage } from "@atlantum/react";

<HelpMessage text="Required field" validationStatus="error" />

Prop	Type	Default
text	string	—
validationStatus	"default" | "error" | "warning" | "success"	"error"

---

Divider

Visual separator line for layout sections.

import { Divider } from "@atlantum/react";

<Divider />
<Divider orientation="vertical" />
<Divider appearance="inverted" />

Prop	Type	Default
orientation	"horizontal" | "vertical"	"horizontal"
appearance	"primary" | "inverted"	"primary"
fullWidth	boolean	true
width	string	—
decorative	boolean	true

---

Spinner

Loading indicator with size and variant axes.

import { Spinner } from "@atlantum/react";

<Spinner size="md" variant="default" description="Loading data…" />

Prop	Type	Default
size	"sm" | "md" | "lg"	"md"
variant	"default" | "calm"	"default"
description	string	—

Changelog

See CHANGELOG.md for the full version history.

License

MIT