Prizm UI

• About: prizm.zyfra.com
• Documentation&Descriptions: prizm.site & GitBook
• Figma: Community
• Git: github.com/zyfra/Prizm

Community

• Your ideas are very welcome in Github issues or discussions

• Join PRIZM News Telegram chanel

• Chat join Prizm Community Telegram group

Libraries

@prizm-ui/core

@prizm-ui/components

@prizm-ui/helpers

@prizm-ui/icons

@prizm-ui/flag-icons

Default install:

You can easily install Prizm UI using Angular CLI by running the following command:

ng add @prizm-ui/install

Manual install:

Required > Install theme and core:

npm i @prizm-ui/core
npm i @prizm-ui/theme

Optional > Install helpers:

npm i @prizm-ui/helpers

Optional > Install components:

npm i @prizm-ui/components

Optional > Install charts library:

npm i @prizm-ui/charts

How setup global styles from @prizm-ui/styles ?

Add our styles to angular config:

"assets": [
// ....
{
"glob": "**/*",
"input": "node_modules/@prizm-ui/components/src/styles/fonts",
"output": "assets/prizm-ui/fonts"
},
],
"styles": [
// (Required) Add for use our theme
"node_modules/@prizm-ui/theme/src/styles/styles.less",
// (Optional) Add for use our components
"node_modules/@prizm-ui/components/src/styles/styles.less",
// (Optional) Add only for use our old icon set (deprecated)
"node_modules/@prizm-ui/components/src/styles/icons/icons.less",
"node_modules/@prizm-ui/components/src/styles/icons-16/icons-16.less"
],

Or you can add to your root styles.less

// (Required) Add for use our theme
@import '~@prizm-ui/theme/src/styles/styles.less';
// (Optional) Add only for use our components library
@import '~@prizm-ui/components/src/styles/styles.less';

// (Optional) Add only for use our old icon set (deprecated)
@import '~@prizm-ui/components/src/styles/icons/icons.less';
@import '~@prizm-ui/components/src/styles/icons-16/icons-16.less';

How can you use our icons?

To use our icons as svg, please install our library

npm i @prizm-ui/icons

But if you want to use fonts not only as svg, and also as font, please add to your angular config

"styles": [
...
"@prizm-ui/icons/base/src/styles/styles.less"
],";

or you can only import to your root styles.less

@import '~@prizm-ui/icons/base/src/styles/styles.less';

Thanks to

🔹 This is a library for one of the best Angular frameworks. Thanks to Angular team

🔹 Our docs are based on Taiga UI. All Taiga UI packages are covered by Apache 2.0 (read more here). Thanks to Taiga UI

🔹 We use nrwl nx as monorepo. Thanks to Nrwl team

🔹 Our charts library are base on AntV G2Plot. Thanks to AntV G2Plot

🔹 Also we want to give thanks to all the following

• husky
• ngx-markdown
• ngx-mask
• primeng
• ng-web-apis
• fantasticon
• clibpboar.js
• date-fns
• rxjs
• svg-icons-builder
• jest
• lodash
• cypress
• playwright
• highlight
• highlightjs-line-numbers
• postcss
• prettier
• webpack
• pretty-quick
• eslint
• svg-to-ts
• typescript
• commitlint

Contributors

See our CONTRIBUTING.md guide.

License

• You are welcome to utilize our library in both commercial and personal projects.

• The Prizm UI packages are licensed under the MIT License.

• Read more about this license here