Welcome to the Appsmith Design System repository! This repository contains the design system components, styles, and guidelines used across the Appsmith platform.

About Appsmith

Appsmith is an open-source, low-code application development platform that allows users to build business applications quickly and easily. The Appsmith Design System plays a crucial role in providing a consistent and visually appealing user interface across all Appsmith projects.

External Usage

To use the Appsmith Design System in your project, follow these steps:

Installation

npm install @appsmithorg/design-system

or

yarn add @appsmithorg/design-system

Including CSS

Add the css import in the root index css file

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

Usage

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

<Button onClick={() => console.log("An ads button was clicked")}>
  Click me
</Button>

Contribute

1. Clone the repository to your local machine using the following command:

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

The repository you are cloing is a monorepo that contains several packages, each serving a different purpose.

2. Navigate to the design-system directory

cd design-system/packages/design-system

3. Get all dependencies with

yarn install

Then run storybook in development and watch mode with

yarn run storybook

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

4. To add a new component, use our template

yarn generate:component YOUR_NEW_COMPONENT_NAME

This generates all the scaffolding our components use. Simply replace the fields in caps lock and develop away!

5. To ensure that any changes you make are not breaking any other components or their stories, run

yarn test-storybook

and fix any failures before you create a pull request.

Using your changes externally

This repository is a library, and for any changes made here to reflect in another repository, the maintainers will have to publish a release. To get your PR accepted,

1. Add a link to your PR in #design-system and ask someone to generate a release for you. They will give you an alpha version.
2. Replace the version of design-system in the appsmith repository with this alpha version.

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 { Button } from "@appsmithorg/design-system";

Links

• Storybook