Arcade Design System

A modern React component library that ensures consistent UI across all our applications, built with TypeScript, Tailwind CSS and shadcn/ui.

✨ Cool Features

• 🎨 Modern Design: Clean, professional components following modern design principles
• ♿ Accessible: Built on Radix UI primitives for excellent accessibility out of the box
• 🎯 TypeScript: Full TypeScript support for better developer experience
• 🎨 Customizable: Easy to customize with Tailwind CSS classes
• ⚡ Lightweight: Optimized bundle size with tree-shaking support
• 🔧 Flexible: Easy to integrate with any React project

📦 Installation

Install the design system as a dependency in your project:

npm install @arcadeai/design-system
# or
pnpm add @arcadeai/design-system
# or
yarn add @arcadeai/design-system

Peer Dependencies

Make sure you have the required peer dependencies installed:

npm install react react-dom tailwindcss lucide-react

Required versions:

• React: ^19.1.0
• React DOM: ^19.1.0
• Tailwind CSS: ^4.1.10
• Lucide React: ^0.522.0

🚀 Quick Start

1. Import Styles

Import the design system styles in your main CSS file or at the root of your application:

@import '@arcadeai/design-system/dist/assets/index.css';

2. Configure Tailwind CSS

Ensure your Tailwind CSS configuration is compatible with the design system. The design system uses Tailwind CSS v4 with specific configurations.

3. Use Components

Import and use components in your React application:

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

function MyApp() {
  return (
    <Card>
      <Input placeholder="Enter your email" />
      <Button>Submit</Button>
    </Card>
  );
}

🛠️ Development

Prerequisites

• Node.js (v18 or higher)
• pnpm (recommended) or npm

Getting Started

1. Clone the repository:

git clone https://github.com/ArcadeAI/Design-System
cd @arcadeai/design-system

2. Install dependencies:

pnpm install

3. View components in Storybook:

pnpm dev

🏗️ Technology Stack

This design system is built on top of:

• shadcn/ui - A collection of re-usable components built using Radix UI and Tailwind CSS
• Radix UI - Unstyled, accessible components for building high‑quality design systems
• Tailwind CSS - Utility-first CSS framework for rapid UI development
• TypeScript - Type-safe JavaScript for better developer experience
• Storybook - Component development and documentation

🎨 Design Tokens

The design system uses Tailwind CSS for consistent spacing, colors, typography, and other design tokens. When adding new components:

• Use existing Tailwind classes when possible
• Follow the established color palette
• Maintain consistent spacing and typography scales

🔧 Contributing

Adding Icons

To add a new icon to the design system:

1. Add the SVG file: Place your SVG icon in /lib/assets/icons/

   # Example: adding a new "example" icon
   cp example.svg lib/assets/icons/

2. Generate the React component: Run the icon generation script

   pnpm generate-icons

3. Use the icon: The generated React component will be automatically available

   import { ExampleIcon } from '@arcadeai/design-system/components/ui/atoms/icons';

Adding Toolkits

To add a new toolkit to the system:

1. Navigate to the toolkits metadata: Open lib/metadata/toolkits.ts

2. Add your toolkit entry: Add a new entry to the TOOLKITS array

   {
      id: 'X',
      label: 'X',
      isBYOC: false,
      isPro: false,
      publicIconUrl: `${PUBLIC_ICON_URL}/x.svg`,
      icon: Icons.X,
      // Other properties...
   }

Adding OAuth Providers

To add a new OAuth provider:

1. Navigate to OAuth providers metadata: Open lib/metadata/oauth-providers.ts

2. Add OAuth identifiers: Define your OAuthId and OAuthProviderId

   export const OAuthId = {
     Asana: 'arcade-asana',
     Atlassian: 'arcade-atlassian',
     // Add to the respective id
   }
   
   export const OAuthProviderId = {
     Asana: 'asana',
     Atlassian: 'atlassian',
     // Add to the respective provider id
   }

3. Choose the appropriate category:

   • For prebuilt OAuth providers: Add a record to PREBUILT_OAUTH_PROVIDERS
   • For custom OAuth providers: Add it to OTHER_OAUTH_PROVIDERS

   // Example for prebuilt provider
   export const PREBUILT_OAUTH_PROVIDERS: OAuthCatalogue[] = [
      {
        id: OAuthId.Asana,
        provider_id: OAuthProviderId.Asana,
        name: 'Asana',
        description: 'Authorize tools and agents with Asana',
        publicIconUrl: `${PUBLIC_ICON_URL}/asana.svg`,
        icon: Asana,
        docs: '<https://docs.arcade.dev/home/auth-providers/asana>',
      },
      // Add to the respective array
   ]

Development Workflow

1. Make your changes following the patterns above
2. Test your changes in Storybook: pnpm dev
3. Run tests: pnpm test
4. Build the project: pnpm build
5. Submit a pull request with your changes

Built with ❤️ by the Arcade team