@arctura/atomics

Reusable React components and hooks for the Arctura design system.

Install

yarn add @arctura/atomics

Current Version

1.0.0

Versions

• 1.0.0 - current package version
• 0.0.3 - alpha version
• 0.0.2 - alpha version

Public API

Import components from the package root:

import {
  Badge,
  Button,
  Card,
  CardFooter,
  CardHeader,
  CardMedia,
  Carousel,
  Connector,
  Drawer,
  Fab,
  Form,
  Hero,
  IconButton,
  Link,
  List,
  ListItem,
  ProgressStepper,
  Select,
  Step,
  TextArea,
  TextInput,
  Typography,
} from '@arctura/atomics';

Import shared hooks from @arctura/atomics/hooks:

import { useBreakpoints, useControlled } from '@arctura/atomics/hooks';

Component Groups

• Actions: Button, IconButton, Fab
• Data display: Badge, Card, Carousel, Hero, List, Link, Typography
• Navigation and overlays: Drawer, Select
• Forms: Form, TextInput, TextArea
• Progress: ProgressStepper, Connector, Step

Notes

• The components are designed to consume the CSS variables generated by @arctura/theme.
• The package ships as a dual ESM/CJS build in dist/.

Development

From the repository root:

yarn workspace @arctura/atomics build
yarn workspace @arctura/atomics lint
yarn workspace @arctura/atomics test
yarn workspace @arctura/atomics typecheck