Arcade Design System

Published as @arcadeai/design-system — 100+ accessible React components built on Base UI with Tailwind CSS.

Usage

npm install @arcadeai/design-system

Import styles at your app root:

@import "@arcadeai/design-system/index.css";

Then use components:

import { Button, Card, Input } from "@arcadeai/design-system";

Form groups: Fieldset

Prefer Fieldset over native <fieldset> for groups containing design-system controls, especially permission-gated or managed settings. Import it from @arcadeai/design-system/components/ui/atoms/fieldset.

Fieldset renders a semantic <fieldset> and supplies Base UI's disabled context. Put each Base UI field in FormItem (Field.Root) so radios, checkboxes, switches, and selects inherit disabled. A native <fieldset disabled> does not supply that context. FormItem also works outside React Hook Form.

import { Checkbox } from "@arcadeai/design-system/components/ui/atoms/checkbox";
import { Fieldset } from "@arcadeai/design-system/components/ui/atoms/fieldset";
import { FormItem } from "@arcadeai/design-system/rhf";
import { useId } from "react";

export function NotificationSettings({ canEdit }: { canEdit: boolean }) {
  const id = useId();

  return (
    <Fieldset disabled={!canEdit}>
      <legend>Notifications</legend>
      <FormItem className="flex items-center gap-2">
        <Checkbox defaultChecked id={id} name="emailNotifications" />
        <label htmlFor={id}>Email notifications</label>
      </FormItem>
    </Fieldset>
  );
}

For settings that cannot be edited, use disabled; Fieldset has no group-level readOnly prop. Keep permission checks in submit handlers and on the server.

Native <fieldset> remains appropriate for groups containing only native controls when Base UI context is unnecessary. Custom controls that do not consume Base UI field context still need their own disabled handling.

See the Fieldset implementation and disabled-control tests.

shadcn Registry

The design system is also available as a shadcn registry. Add the registry to your components.json:

{
  "registries": {
    "@arcadeai": "https://ds.arcade.dev/r/{name}.json"
  }
}

Then install components:

npx shadcn@latest add @arcadeai/arcadeai-theme
npx shadcn@latest add @arcadeai/button

For the form-group pattern, install both @arcadeai/fieldset and @arcadeai/form (plus the controls you use), then import from the generated local files:

npx shadcn@latest add @arcadeai/fieldset @arcadeai/form @arcadeai/checkbox

Development

make help      # see all available commands
make install   # install dependencies
make dev       # start Storybook dev server (headless)
make run       # start Storybook (opens browser)
make build     # build the library
make check     # lint + type-check

Contributing

Adding Icons

1. Place SVG in lib/assets/icons/
2. Run bun run generate-icons
3. Import from @arcadeai/design-system/components/ui/atoms/icons

Adding Toolkits

Add entries to lib/metadata/toolkits.ts — see existing entries for the pattern.

Adding OAuth Providers

Add entries to lib/metadata/oauth-providers.ts — see existing entries for the pattern.