Robocorp Design System

React based UI components for faster and easier web development.

Installation

Add @robocorp/ds to your project dependencies. Be sure to install a specific version:

# with npm
npm install @robocorp/[email protected]

# with yarn
yarn add @robocorp/[email protected]

Usage

You can find the individual component documentation and implementation examples at https://design-system.robocorp.com

Wrap your project or UI view with the ThemeProvider component and import and consume individual UI components:

import { createRoot } from 'react-dom/client';
import { ThemeProvider, Button } from '@robocorp/ds';

function App() {
  return (
    <ThemeProvider theme="dark">
      <Button variant="primary">Hello World</Button>
    </ThemeProvider>
  );
}

const container = document.getElementById('app');
const root = createRoot(container);
root.render(<App />);

Using DateRangePicker

Usage of the DateRangePicker will require addition of date-fns dependency to your app as it's configured as a optional peer dependency of this library.

npm i date-fns

Font file assets

Embed the required font family files via Robocorp CDN server:

<link rel="preconnect" href="https://cdn.robocorp.com" crossorigin />
<link href="https://cdn.robocorp.com/fonts/robocorp-ds-fonts-v3.css" rel="stylesheet" />
<link
  rel="preload"
  as="font"
  href="https://cdn.robocorp.com/fonts/Inter-Regular.woff2"
  type="font/woff2"
  crossorigin="anonymous"
/>
<link
  rel="preload"
  as="font"
  href="https://cdn.robocorp.com/fonts/BarlowSemiCondensed-Bold.woff2"
  type="font/woff2"
  crossorigin="anonymous"
/>

To use local font files, copy public/fonts to your project's asset folder and import the following:

<link rel="stylesheet" href="/fonts/fonts.css" />

Development

Read Development guide on setting up the development environment.