Importing Components

latest

Arc components can be imported via the @arc-ui/components package.

caution

Don't write import statements like this import { Surface } from "@arc-ui/components";. This will import the entire component library. Instead you should explicitly import each component you need.

Individual imports

This style of imports will result in much smaller bundle sizes. Use the name of the component for the import path.

import { <the-component-you-want>, <the-sub-component-you-want> } from "@arc-ui/components/<the-component-you-want>";

import { Align } from "@arc-ui/components/Align";
import { Elevation } from "@arc-ui/components/Elevation";
import { Surface } from "@arc-ui/components/Surface";
import { ButtonV2 } from "@arc-ui/components/ButtonV2";
import { Heading } from "@arc-ui/components/Heading";
import { Text } from "@arc-ui/components/Text";
import { Group } from "@arc-ui/components/Group";
import { Columns } from "@arc-ui/components/Columns";
import { Section } from "@arc-ui/components/Section";
import { VerticalSpace } from "@arc-ui/components/VerticalSpace";
import { Breadcrumbs, BreadcrumbsItem } from "@arc-ui/components/Breadcrumbs";