@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="[email protected]"
  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