TimUI
Angular UI library built with Material CDK and Tailwindcss
Get started
Download the package from NPM
npm install @tim-mhn/ng-ui
Import the stylesheet
In your global .scss
or .css
file, add
@import "@tim-mhn/ng-ui/styles.css"
Import the modules you want to use
Example with TimUIButtonModule
and TimUIChipModule
// example.module.ts
import { TimUIButtonModule } from 'tim-ui/button';
import { TimUIChipModule } from 'tim-ui/chip'
@NgModule({
imports: [TimUIButtonModule, TimUIChipModule],
declarations: [ExampleComponent]
})
export class ExampleModule {}
// example.component.html
<button tim-flat-button color="primary" size="md">Click</button>
<tim-chip color="destructive" size="sm">chip</tim-chip>
List of modules
TimUIAlertModule
TimUIAvatarModule
TimUIButtonModule
TimUICardModule
TimUIChipModule
TimUICoreModule
TimUIDialogModule
TimUIDividerModule
TimUIDropdownMenuModule
TimUIFeaturedIconModule
TimUILinkModule
TimUISnackbarModule
TimUISpinnerModule
TimUITabsModule
TimUITooltipModule
Build
Run npm run build:ui
to build the project.
Build & Publish
-
Bump the version:
npm version major|minor|patch
-
Build the library:
npm run build:ui
The build artifacts will be stored in thedist/
directory. This will also run the tailwind command to generate the.css
file reusing thetim-tailwind
config. -
Publish to NPM: go to the dist folder
cd dist/ui
runnpm publish
Running unit tests
Run ng test ui
to execute the unit tests via Karma.