@artemdev04/design-system

A modern, accessible, and strongly typed React Design System built with Vite, TypeScript, and Storybook.

!Version
!License

$3

- ⚛️ React 19+ projects support.
- 📘 TypeScript first approach with full type definitions.
- ⚡ Vite powered build for blazing fast performance.
- 🎨 Storybook included for component isolation and documentation.
- 🧪 Vitest integrated through Storybook also with Playwright.
- 🌳 Tree-shakable exports (ESM & UMD support).

$3

``bash


Using npm

npm install @artemdev04/design-system

Using yarn

yarn add @artemdev04/design-system

Using pnpm

pnpm add @artemdev04/design-system
`

$3

Import components directly into your React application:

`tsx
//Your imports

//!IMPORTANT: Import my Stylesheet
import "@artemdev04/design-system/style.css";
//And now you are ready to use my comopnents
import { Button } from "@artemdev04/design-system";

function App() {
return (
console.log("Clicked!")}>
Click me

);
}
`

#### 🖌️ Tailwind Styles Usage

To use tailwind variables edit your tailwind.config file:

`js
/ @type {import('tailwindcss').Config} /

//Import my tailwind preset
import designSystemPreset from "@artemdev04/design-system/tailwind.preset";

export default {
//Insert it into the presets array
presets: [designSystemPreset],
content: ["./index.html", "./src/*/.{js,ts,jsx,tsx}"],
theme: {
extend: {
//Feel free to use your own styles
},
},
plugins: [],
};
`

Tailwind v4.0 imports:

`js
//Your index.css
@import "tailwindcss";

@import "@artemdev04/design-system/style.css";
@config "@artemdev04/design-system/tailwind.preset";
@source "@artemdev04/design-system/dist";

//The rest of your styles
`

> [!CAUTION]
> Border styles are for now quite buggy - I didn't manage how to change the default border color
> in Tailwind v4.0 projects, so it will fallback to the gray and override any color.

$3

Clone the repository and install dependencies:

`bash
git clone https://github.com/azakhardev/design-system.git
cd design-system
npm install
`

$3

| Command | Description |
| ------------------- | -------------------------------------------------- |
| npm run dev | Starts Vite in development mode. |
| npm run storybook | Starts the Storybook documentation server locally. |
| npm run build | Builds the library for production (dist folder). |
| npm run lint` | Runs ESLint to check code quality. |

$3

Link to figma: Artem's Design System