@adhese/ui

Introduction

This is the @adhese/ui component library. It is an implementation of the Gambit Design System. The design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.

The foundation is a collection of "shadcn-ui styled" @radix-ui components, which have been slightly modified to fit the Gambit Design System.

Get started

This document will guide you through the process of setting up a project with the Adhese UI library and the Adhese Design Tokens library.

1. Installation

pnpm add @adhese/ui

pnpm add -D @adhese/design-tokens tailwindcss-animate

npm install @adhese/ui

npm install -D @adhese/design-tokens tailwindcss-animate

yarn add @adhese/ui

yarn add -D @adhese/design-tokens tailwindcss-animate

2. Add the variables to your global css file

@source 'path/to/node_modules/@adhese/ui';
@plugin 'tailwindcss-animate';
@import '@adhese/design-tokens/variables';
@import '@adhese/design-tokens/animations';
@import './theme-tokens.css';

Generating a theme

In the design-tokens folder in the gambit-design-system repo there is a theme generator that you should use to generate the available themes from Figma. You can also decide to DIY ofcourse, you can take a look at the themes used in apps/docs to get an idea.

Read more about theming.

3. Ready to go!

import { Button } from '@adhese/ui';

function Example() {
  function handleClick() {
    console.log('clicked on the button!');
  }
  return <Button onClick={handleClick}>Get started</Button>;
}

4. Local development (VITE ONLY)

When working on @adhese/ui you may want to see your local changes inside your own application before making a PR. To use your locally cloned version of @adhese/ui there are few steps you need to follow:

4.1. Add a new override to your package.json that points to the local version:

note: if you are using a monorepo the override should be defined at the root package.json.

• pnpm https://pnpm.io/settings#overrides
• npm https://docs.npmjs.com/cli/v8/configuring-npm/package-json#overrides
• yarn https://yarnpkg.com/configuration/manifest#resolutions

"@adhese/ui": "file:///path/to/file/adhese/gambit-design-system/packages/ui"

4.2. Create a new alias for the @adhese/ui package in the

vite.config.ts and exclude from optimization.

import path from 'path';

const pathToUi = path.resolve(
  __dirname,
  '../../../gambit-design-system/packages/ui',
);

export default defineConfig({
  plugins: [react(), svgr()],
  optimizeDeps: {
    exclude: ['@adhese/ui'],
  },
  resolve: {
    alias: {
      '@adhese/ui': path.join(pathToUi, 'dist/components/ui/'),
    },
  },

4.3 Versioning and nightly builds

To create a new changeset for you local changes, run the following command and follow the instructions:

pnpm changeset

Tip: use to switch between major/minor/patch changes.

Every commit on a PR will get a matching nightly build that you can also use to test out your changes.