Angular Design System

A custom design system built with Angular and Tailwind CSS. This project includes reusable, highly customizable components like buttons, badges, alerts, accordions, and a date picker. It’s designed to help you quickly build consistent and beautiful UIs for your Angular applications.

Features

• Reusable Components: Buttons, badges, alerts, accordions, date pickers, and more.
• Customizable: Built with Tailwind CSS for easy styling and theming.
• Storybook Integration: Visualize and test components in isolation. This project includes Storybook for visualizing and testing components in isolation. Run Storybook then open your browser and navigate to http://localhost:6006 to explore the component library.

   npm run storybook
  

Tech Stack

• Tailwind CSS: For providing a utility-first CSS framework.
• Angular: For building robust and scalable web applications.
• Storybook: For making component-driven development easier.

Components

1. Button

• Supports multiple variants: primary, secondary, success, destructive, info, and outline variants.
• Includes icons (left, right, and icon-only buttons).

2. Badge

• Multiple variants: primary, secondary, success, destructive, info, and neutral.
• Supports icons, and dismissible badges.
• Customizable sizes and pill/square styles.

3. Alert

• Multiple states: success, warning, error, info, and neutral.
• Dismissible alerts.

4. Accordion

• Customizable headers and content.
• Supports icons and hover effects.

6. More Components

• Dropdown: Customizable dropdown menus.
• Card: Flexible card component with headers, content, and footers.
• Modal: Reusable modal dialogs.

Installation

Steps

1. Clone the repository:

   git clone https://github.com/Shaban-Eissa/Angular-Design-System
   cd Angular-Design-System
   

2. Install dependencies:

   npm install
   

3. Run the development server:

   ng serve
   

4. Open your browser and navigate to http://localhost:4200.

Contributions

Contributions are welcome!