@apify/ui-library

Browse components at the hosted Storybook.

Apify's React design-system library — primitives, theme tokens, and styled components shared across Apify Console and the marketing web.

Install

pnpm add @apify/ui-library

Peer dependencies (install in your project if not already there):

• react 17.x · 18.x · 19.x
• react-dom 17.x · 18.x · 19.x
• styled-components ^6.1.19

Quick start

import { Box, Button, Text } from '@apify/ui-library';

export const SaveBar = ({ onSave }: { onSave: () => void }) => (
    <Box pt="space8" pb="space8">
        <Text size="regular">You have unsaved changes.</Text>
        <Button variant="primary" color="default" mt="space4" onClick={onSave}>
            Save
        </Button>
    </Box>
);

<Box> exposes spacing tokens as utility props (pt, mb, mx, p, …); <Text> and <Heading> apply typography tokens via size. All values come from the shared theme — never hardcode colors, spacing, or radii.

What's inside

• Layout — Box (utility-prop wrapper around any element)
• Typography — Text, Heading, plus content / shared / marketing variants
• Forms — Button, IconButton, Checkbox, RadioButton, Switch, Select
• Data — Table + primitives (TableHead, TableRow, TableCell, …), Badge, Chip, Tag
• Feedback — Banner, Message, Spinner
• Navigation — Tabs, Breadcrumb, Pagination, Link
• Overlay — Floating (menus, tooltips), CollapsibleCard
• Theme tokens — theme.color.*, theme.space.*, theme.text.*, theme.radius.*, theme.shadow.*, theme.transition.*

Using color tokens outside of styled-components

For external projects that don't use styled-components — such as Tailwind-based apps or plain CSS — the package ships pre-built CSS files that register all color tokens as CSS custom properties on :root:

• @apify/ui-library/style/colors/tokens.light.css
• @apify/ui-library/style/colors/tokens.dark.css

Import the file that matches your theme in your global stylesheet:

@import '@apify/ui-library/style/colors/tokens.light.css';

You can then reference any token via CSS custom properties:

.my-element {
    color: var(--color-neutral-text);
    background: var(--color-neutral-background);
    border-color: var(--color-neutral-border);
}

For Tailwind, map the variables in tailwind.config.js:

/** @type {import('tailwindcss').Config} */
export default {
    theme: {
        extend: {
            colors: {
                'neutral-text': 'var(--color-neutral-text)',
                'neutral-bg': 'var(--color-neutral-background)',
                'neutral-border': 'var(--color-neutral-border)',
            },
        },
    },
};

Storybook

From the repository root:

pnpm run storybook

This starts both Storybooks in parallel — Console-specific stories on http://localhost:6006 and shared design-system stories (this library) on http://localhost:6007.

Contributing

See CONTRIBUTING.md for the component lifecycle, design-token sync (Figma colors and Supernova typography), Storybook conventions, publishing, and the review checklist. New components are easiest to scaffold with the /create-ui-component Claude Code skill.