Adobe XD Design System Components

A production-ready React component library based on Adobe XD specifications, featuring consistent design tokens, TypeScript support, and Tailwind CSS integration.

Features

• ✅ Adobe XD Compliant: Exact color values (#d6002a, #006d89) and 2px border radius
• ✅ TypeScript Support: Full type safety with IntelliSense
• ✅ Tailwind CSS Ready: Pre-configured with design tokens
• ✅ Production Ready: Built with Radix UI primitives for accessibility
• ✅ Tree Shakeable: Import only the components you need

Installation

npm install @adobe-xd-design-system/components

Quick Start

1. Import Components

import { Button, ButtonGroup } from '@adobe-xd-design-system/components';
import '@adobe-xd-design-system/components/styles.css';

2. Configure Tailwind (Optional)

Extend your tailwind.config.js:

const designSystemConfig = require('@adobe-xd-design-system/components/tailwind.config');

module.exports = {
  ...designSystemConfig,
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/@adobe-xd-design-system/components/dist/**/*.js'
  ],
}

3. Use Components

import { useState } from 'react';
import { Button, ButtonGroup } from '@adobe-xd-design-system/components';

function App() {
  const [activeTab, setActiveTab] = useState('home');

  return (
    <div className="p-6">
      {/* Buttons with brand colors */}
      <div className="space-x-3 mb-6">
        <Button>Primary Action</Button>
        <Button variant="outline">Secondary</Button>
        <Button variant="attention">Important</Button>
      </div>

      {/* Tab navigation */}
      <ButtonGroup 
        items={[
          { id: 'home', label: 'Home' },
          { id: 'about', label: 'About' },
          { id: 'contact', label: 'Contact' },
        ]}
        defaultActiveId={activeTab}
        onTabChange={(id) => setActiveTab(id)}
      />
    </div>
  );
}

Components

Button

Multi-variant button component with Adobe XD specifications:

// Primary button (brand color #006d89)
<Button>Primary Action</Button>

// Outline variant
<Button variant="outline">Secondary Action</Button>

// Link variant
<Button variant="link">Link Text</Button>

// Attention variant (brand color #d6002a)
<Button variant="attention">Important Action</Button>

// With icons
<Button>
  <PlusIcon className="h-4 w-4 mr-2" />
  Add Item
</Button>

// Sizes
<Button size="sm">Small</Button>
<Button size="lg">Large</Button>
<Button size="icon">⚙</Button>

Props:

• variant: "default" | "outline" | "link" | "attention"
• size: "sm" | "default" | "lg" | "icon"
• All standard HTML button attributes

ButtonGroup

Tab-style navigation with active state styling:

<ButtonGroup 
  items={[
    { id: 'dashboard', label: 'Dashboard' },
    { id: 'settings', label: 'Settings' },
  ]}
  defaultActiveId="dashboard"
  onTabChange={(id) => console.log('Active:', id)}
/>

// With icons
<ButtonGroup 
  items={[
    { 
      id: 'home', 
      label: 'Home', 
      icon: <HomeIcon className="h-4 w-4" /> 
    },
  ]}
/>

Props:

• items: Array of { id: string, label: ReactNode, icon?: ReactNode }
• defaultActiveId: Initial active tab ID
• onTabChange: Callback when tab changes

Design Tokens

The system includes consistent design tokens:

const DESIGN_TOKENS = {
  BRAND_COLOR: '#d6002a',        // Headlines, accents
  PRIMARY_ACTION: '#006d89',     // Buttons, interactive elements
  PRIMARY_HOVER: '#00495b',      // Hover states
  BORDER_RADIUS: '2px',          // Consistent corners
  COMPONENT_HEIGHT: '30px',      // Standard button height
};

CSS Variables

The package includes CSS custom properties for easy theming:

:root {
  --brand-color: #d6002a;
  --primary-action: #006d89;
  --primary-hover: #00495b;
  --border-radius: 2px;
}

TypeScript

Full TypeScript support with exported types:

import type { ButtonProps, ButtonGroupProps } from '@adobe-xd-design-system/components';

Peer Dependencies

• React >=16.8.0
• React DOM >=16.8.0
• Tailwind CSS >=3.0.0

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

License

MIT

Support

For issues and questions, please visit our GitHub repository.