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.

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

  npm install david-ui-angular

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

1. Import the styles: 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:

@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

"styles": [
              "src/styles.scss",
              "./node_modules/david-ui-angular/styles/_styles.scss"
            ],

2. Import the david-ui-angular modules into 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.

<dui-button>Click Me</dui-button>

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

"./node_modules/david-ui-angular/**/*.{html,ts,js,mjs}"

For detailed usage and documentation, please visit our official documentation.

DUI-Angular uses a number of open source libraries to work properly:

• [Angular 16] - Angular Framework verion ^16.2.0!
• [Tailwind Css] - Uses Tailwind Css v ^3.3.3 for styling UI.
• [Bundle-Scss] - For bundling scss files

And of course david-ui-angular itself is open source library.

You can contribute to the package by following the steps below:

1. Fork the project
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a pull request
6. Wait for the pull request to be reviewed
7. Get your pull request merged
8. Celebrate 🎉
9. Repeat

DUI-Angular requires Node.js v18+ to run.

Install the dependencies and devDependencies and start the server.

npm i
ng serve

npm run build-library

There are two applications inside project folder consumer and david-ui-angular as name indicate one is the consumer of the library to test the library and also contains the documentation, while the other is the library itself which has components and all.

Run this command in the root folder

ng build consumer

The output directory for the documentation will be 'dist/consumer'

This project is licensed under the MIT License. For more details, please see the LICENSE file.

If you have any questions about this project, please feel free to reach out to us at daviduiorg@gmail.com

Run ng generate component component-name --project david-ui-angular to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project david-ui-angular.

Note: Don't forget to add --project david-ui-angular or else it will be added to the default project in your angular.json file.

Run ng build david-ui-angular to build the project. The build artifacts will be stored in the dist/ directory.

After building your library with ng build david-ui-angular, go to the dist folder cd dist/david-ui-angular and run npm publish.

Run ng test david-ui-angular to execute the unit tests via Karma.

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.