Get Started With David UI Angular

David UI Angular is a comprehensive Angular framework that leverages the power of Tailwind CSS to provide a rich set of UI components, making it easy to build stylish web applications.

Learn how to use david-ui-angular components from this documentation to quickly and easily create elegant and flexible pages using Tailwind CSS.

Installation

To get started with David UI Angular, simply install it via npm or yarn.

    
npm install david-ui-angular
// or
yarn add david-ui-angular

Getting Started

Follow these steps to integrate David UI Angular into your Angular project:

1. Import the styles in your Angular project

In your project's styles.css or styles.scss, import David UI Angular's styles along with Tailwind CSS and you also need to import the @angular/cdk styles:

    
<!-- Add this to your styles.scss file -->
@import "<path-to-node_modules>/david-ui-angular/styles/_styles.scss";
@import "@angular/cdk/overlay-prebuilt.css";

OR
You can add the link of style sheet in your angular.json style's list

    
// Add this to your angular.json file
"styles": [
"src/styles.scss",
"./node_modules/david-ui-angular/styles/_styles.scss"
],

2. Import the modules in your Angular project

Import the david-ui-angular modules into your app.module.ts file.

    
// e.g Button Module, add this to your app.module.ts file
import { DUIButton } from "david-ui-angular";
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, DUIButton],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}

then you can import and use the component in your html file like shown below.

    
<!-- e.g Button Component, add this to your app.component.html file -->
<dui-button>Click Me</dui-button>

3. Add the Tailwind CSS configuration in your Angular project

After this you need to add below line into the content array of you tailwind.config.js file

    
// add below line into the content array of your tailwind.config.js file
"./node_modules/david-ui-angular/**/*.{html,ts,js,mjs}"

Typescript

David UI Angular is a TypeScript based components library and you can easily use it in your TypeScript based projects.