UI Design system of Appsmith

Install

npm install @appsmith/design-system-old

or

yarn add @appsmithorg/design-system-old

Including CSS

Add css import in the root index css file

@import "~@appsmithorg/design-system-old/build/css/design-system-old.css";

Usage

import { TooltipComponent } from "@appsmithorg/design-system-old";

<TooltipComponent content="Some useful content 🤷🏽‍♂️">
  Hover here 😁
</TooltipComponent>

Contribute

🚫 This package is closed for contributions. We welcome contributions to the design-system package.

git clone https://github.com/appsmithorg/design-system.git

Get all dependencies with

cd design-system/packages/design-system-old
yarn install

Then run storybook in development and watch mode with

yarn run design-system:storybook

Any stories you write within design-system/packages/design-system-old/src/** will show up here.

To use your local version of the package, run

yarn link

in this repository, then copy instruction it outputs into the root directory of the repository you want to use this package in. Run

yarn install 

again to be able to import the components using

import { TooltipComponent } from "@appsmithorg/design-system-old";

Create story template

yarn create-story -f <folder-name>

'folder-name' is the folder which holds the component which the story template is being created. This should be under 'src' folder.

Happy playground testing!

Links

• Home page