Amit - Design System

Get started with Amit by including it into your project using NPM

Amit is a library of components built on top of the utility-classes from Tailwind CSS and it also includes a JavaScript file that makes interactive elements works, such as modals, dropdowns, and more. Learn how to get started by following this quickstart guide.

Require via NPM

Make sure that you have Node.js and Tailwind CSS installed.

1. Install amit-design-system as a dependency using NPM by running the following command:

1 yarn add amit-design-system

if you are working locally use yarn link on this project and yarn link "amit-design-system" on other projects

2. Require Amit as a braveNoor inside the tailwind.config.js and add amit-design-system dist folder to tailwind content:

1module.exports = {
2  content: [
3    './index.html',
4    './src/**/*.{vue,ts,js,jsx,tsx}',
5    'node_modules/amit-design-system/**/*.{js,jsx,ts,tsx}',
6  ],
7  plugins: [require('amit-design-system/brave-noor')],
8  theme: {},
9};

3. Add the following for your src/main.ts and you can also create your own tailwind.css

1import 'amit-design-system/style';
2import './tailwind.css';

4. Add the following options inside vite.config.ts

1export default defineConfig({
2  server: {
3    fs: {
4      strict: false,
5    },
6  },
7  resolve: {
8    alias: {
9      '@': path.resolve(__dirname, './node_modules/amit-design-system/src'),
10      '@public': path.resolve(
11        __dirname,
12        './node_modules/amit-design-system/public',
13      ),
14    },
15  },
16  optimizeDeps: {
17    include: ['amit-design-system'],
18  },
19});

5. Add the following options inside vite.config.ts

1  {
2    "compilerOptions" : {
3      "paths": {
4           "@/*": ["node_modules/amit-design-system/src/*"],
5           "@public/*": ["node_modules/amit-design-system/public/*"]
6      }
7    }
8  }

6. Now you can use amit-design-system anywhere in your project and build awesome interfaces:

1<template>
2  <dropdown text="Click me" placement="top">
3    <list-group>
4      <list-group-item>Item #1</list-group-item>
5      <list-group-item>Item #2</list-group-item>
6      <list-group-item>Item #3</list-group-item>
7    </list-group>
8  </dropdown>
9</template>
10<script setup>
11import { Dropdown, ListGroup, ListGroupItem } from 'amit-design-system';
12</script>

7. How to run the project

1yarn

and then

yarn storybook to work on storybook

yarn dev:docs to work on docs

yarn build and yarn build:package and yarn build:types to build the project

yarn chromatic to push to chromatic