Angular Theme using Tailwind

A collection of reusable, styled components built with Angular, showcased using Storybook for efficient UI development and testing. Visit the online Storybook for a live preview of all components.

Project Overview

This project serves as a UI component library for Angular applications, leveraging Storybook to provide an interactive development environment. Each component is designed to be customizable, testable, and ready for production use.

Installation

Install my-project with npm

  npm i @kalees64/tw-theme

Copy the css file path and paste it to your style.css file

  @import "../node_modules/@kalees64/tw-theme/index.css";

Usage/Examples

After installation, you can import and use the components directly in your Angular applications. Refer to each component's Storybook documentation for usage details and available props.

app.component.ts

import { ButtonComponent, SpinnerComponent } from '@kalees64/tw-theme';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ SpinnerComponent, ButtonComponent, CommonModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
})

app.component.html

<tw-spinner size="small" color="primary"></tw-spinner>

<tw-button label="Button" variant="danger"></tw-button>

Documentation

Read the below documentation for more knowledge about the components.

Storybook

Available Components

• Button
• Spinner
• Badge
• Card
• Header