The AI DIAL UI Kit is an production-ready React component library designed to streamline your development process. It features a collection of base components, such as Buttons, Inputs, Dropdowns, and more — allowing you to effortlessly reuse elements, quick and easy.

• ✨ Highlights
• 📖 Documentation
• 🚀 Quick Start
  • Prerequisites
  • Installation
  • Basic Usage
• Development
  • Prerequisites
  • Development Setup
  • Project Structure
• 🎨 Theming & Customization
• 📖 Storybook
  • Development Mode
  • Production Build
• 🚀 Usage in Projects
  • Next.js Integration
  • Tree Shaking
• 🤝 Contributing
• 🔒 Security
• 📄 License
• 🌟 Related Projects

• 🎨 Unified User Experience: Ui Kit usage helps with design consistency across AI DIAL applications
• ⚡ Modern Stack: Built with latest React, TypeScript, Vite, and Tailwind CSS
• 🎨 Highly Customizable: Deep theming capabilities with CSS custom properties
• 🧪 Well-Tested: Comprehensive test coverage (70%+) with Vitest and React Testing Library
• 📚 Storybook Ready: Includes interactive component documentation and development playground
• 🛠️ Developer Experience: Leverage ESLint, Prettier, Husky for maintainable code quality
• 📦 Distribution Ready: Deployed as NPM package ready for easy integration

Explore our components and their usage in our interactive Storybook documentation.

• Node.js >= 22.2.0
• npm >= 10.7.0

npm install @epam/ai-dial-ui-kit

import { DialButton } from '@epam/ai-dial-ui-kit'; import '@epam/ai-dial-ui-kit/styles.css'; function App() { return ( <div> <DialButton cssClass="dial-primary-button" onClick={() => alert('Hello AI DIAL!')} /> </div> ); }

• Node.js >= 22.2.0
• npm >= 10.7.0
• Git

1. Clone the repo

   git clone https://github.com/epam/ai-dial-ui-kit.git cd ai-dial-ui-kit

2. Install Dependencies

   npm install

3. Start Development Environment

   # Start Storybook for component development npm run storybook # Run tests in watch mode npm run test -- --watch # Start Vite dev server npm run dev

# Run all tests with coverage npm run test

src/ ├── components/ # React components │ ├── Button/ # Example component │ │ ├── Button.tsx │ │ ├── Button.spec.tsx │ │ └── Button.stories.tsx │ └── ... ├── styles/ # Global styles and Tailwind configuration │ ├── buttons.scss │ ├── typography.scss │ └── tailwind-entry.scss ├── types/ # TypeScript type definitions └── index.ts # Main entry point 

The library uses CSS custom properties for comprehensive theming. Override these variables to match your brand:

:root { /* Background layers */ --bg-layer-0: #000000; --bg-layer-1: #090D13; --bg-layer-2: #171B21; /* Text colors */ --text-primary: #F3F4F6; --text-secondary: #9CA3AF; --text-tertiary: #6B7280; ... }

Full list of variables is available here

Storybook is a handy library for documenting and developing of UI components.

To run fully interactive storybook:

npm run storybook # Open http://localhost:6006

npm run build-storybook

npx http-server ./storybook-static # Open http://127.0.0.1:8080/

To run documents only:

npm run storybook-docs # Open http://localhost:54800/

npm run build-storybook-docs

npx http-server ./storybook-static # Open http://127.0.0.1:8080/

Storybook provides:

• 📖 Interactive component documentation
• 🎨 Visual testing playground
• ♿ Accessibility testing tools
• 📱 Responsive design testing
• 🎯 Component isolation

npm install @epam/ai-dial-ui-kit npm install react react-dom @tabler/icons-react classnames npm install @floating-ui/react monaco-editor @monaco-editor/react

// app/layout.tsx import "@epam/ai-dial-ui-kit/styles.css";

// app/page.tsx "use client"; import { DialButton } from "@epam/ai-dial-ui-kit"; export default function Home() { return ( <div className="w-full h-full flex flex-col gap-3 items-center justify-center"> <h1>Test library</h1> <DialButton onClick={() => console.log("Next.js + AI DIAL UI Kit!")} title="Click me" cssClass="dial-primary-button" /> </div> ); }

Import only the components you need:

// ✅ Good - Tree shakable imports import { DialButton, DialInput } from '@epam/ai-dial-ui-kit'; import '@epam/ai-dial-ui-kit/styles.css'; // Import styles separately // ❌ Avoid - Imports entire library import * as UIKit from '@epam/ai-dial-ui-kit';

We welcome contributions! Please see our Contributing Guide for details on:

• Code style guidelines
• Testing requirements
• Pull request process

If you discover a security vulnerability, please refer to our Security Policy.

Apache 2.0 - see the LICENSE file for details.

• AI-DIAL - Entrypoint for all AI Dial projects

Made with ❤️ by EPAM Systems