@dgshahr/ui-kit NPM

DGS UI Kit

A modern, accessible, and customizable React component library built with TypeScript and Tailwind CSS. This UI Kit is designed to help you rapidly build consistent, scalable user interfaces across your web applications.

✨ Features

📦 Reusable React Components – A growing set of fully styled and typed UI components.
🎨 Customizable Design Tokens – Easily override colors via CSS variables.
🧩 Tree-shakable – Import only what you need.
⚡ Tailwind CSS Utility Classes – Built-in styles with scoped, prefixed Tailwind utilities.
📚 Storybook Documentation – Explore live components & usage.

📦 Installation

Before using this library, make sure you have react installed in your project, as it's a peer dependency.

npm install @dgshahr/ui-kit

yarn add @dgshahr/ui-kit

No need to set up Tailwind or any additional configuration. All styles are already bundled and scoped.

🚀 Getting Started

Visit the documentation site to learn more about:

How to use the components
Customizing theme tokens like colors
Contributing to the project

🧱 Project Structure

Each component lives in its own folder under the src/components directory.

Every component must export from an index.ts or index.tsx file. Vite uses this to build each component individually.
If a component exports multiple members (e.g., Button, ButtonGroup), use named exports in its index file.
Each component must have a ComponentName.stories.tsx file to generate its documentation.

The root index.ts file serves as the main entry point for bundling the entire library and contains exports for all components.