Mozek is my lightweight SCSS toolkit and UI library, designed to make styling fun, fast, and consistent.
I personally enjoy using clean, simple, and not over-engineered. Therefore every Mozek component and class is designed based on my own preferences for clarity, spacing, and feel.
I built it for myself at first (because I got tired of rewriting spacing, colors, and typography),
but now you can enjoy it too.
Install Mozek from npm with the following command.
npm install @mozek-angular
Once you have install,
Make sure your global styles import Mozek Styles first:
@use "mozek-angular/src/styles" as moz;
Below are the UI components currently packaged in Mozek UI.
<moz-button><moz-divider><moz-currency><moz-icon><moz-badge><moz-card><moz-checkbox-group><moz-checkbox><moz-radio-group><moz-radio><moz-input><moz-switch><moz-select><moz-option><moz-progress><moz-button-icon><moz-accordion><moz-accordion-item><moz-datepicker><moz-pagination>
More components will be added over time as the design system grows.
For Mozek Styles, you can use it in:
- Mozek UI Components
- Angular / React / Vue projects
- Plain HTML + SCSS setups
- Any place where SCSS is allowed to shine
Important: before using any of the mixins or relying on the CSS variables,
make sure you import the toolkit in your global SCSS:@use "mozek-angular/src/styles" as moz;
I’ve listed all the main selectors and mixins I’ve prepared below,
so you can quickly see what’s available and how to use it.
These are the built-in palettes, each with shades 50 → 950:
- red
- rose
- fuchsia
- violet
- malibu
- teal
- chartreuse
- emerald
- lemon
- gold
- amber
- tangerine
- silver
- gray
| Selector | Declarations |
|---|---|
| .m-$ | margin: $rem |
| .mt-$ | margin-top: $rem |
| .mb-$ | margin-bottom: $rem |
| .ml-$ | margin-left: $rem |
| .mr-$ | margin-right: $rem |
| .mx-$ | margin-left: $rem, margin-right: $rem |
| .my-$ | margin-top: $rem, margin-bottom: $rem |
| .p-$ | padding: $rem |
| .pt-$ | padding-top: $rem |
| .pb-$ | padding-bottom: $rem |
| .pl-$ | padding-left: $rem |
| .pr-$ | padding-right: $rem |
| .px-$ | padding-left: $rem, padding-right: $rem |
| .py-$ | padding-top: $rem, padding-bottom: $rem |
| .gap-$ | gap: $rem |
| .corner-$ | border-raidus: $rem |
You can replace $ with numbers from 0 – 10 based on the spacing scale.
| Selector | Declarations |
|---|---|
| .flex | display: flex |
| .grid | display: grid |
| .flex-col | flex-direction: column |
| .flex-row | flex-direction: row |
| .flex-center | center both axes |
| .flex-wrap | flex-wrap: wrap |
| .justify-center | justify-content: center |
| .justify-start | justify-content: start |
| .justify-end | justify-content: end |
| .justify-between | justify-content: space-between |
| .justify-evenly | justify-content: space-evenly |
| .items-center | align-items: center |
| .items-start | align-items: start |
| .items-end | align-items: end. |
| Selector | Declarations |
|---|---|
| .text-center | text: center |
| .text-left | text: left |
| .text-right | text: right |
| .text-uppercase | text: uppercase |
| .text-capitalize | text: capitalize |
| .text-oneline | text: no wrap |
| .text-ellipsis | text: single-line & ellipsis |
| .primary | text-color: primary |
and many more...
On top of the utility classes, I also prepared a set of mixins so you can style your own components while still matching the Mozek look and feel.
Reminder: before using these, don’t forget:
@use "mozek-angular/src/styles" as moz;
@include moz.moz-typography('title-lg');
@include moz.moz-typography('title-md');
@include moz.moz-typography('title-sm');
@include moz.moz-typography('label-lg');
@include moz.moz-typography('label-md');
@include moz.moz-typography('label-sm');
@include moz.moz-typography('default');
@include moz.moz-typography('caption');
@include moz.moz-typography('footer');
@include moz.root-button();
@include moz.root-border();
@include moz.root-shadow(1);
@include moz.root-shadow(2);
@include moz.root-shadow(3);
 |
 |
 |
 |
|---|---|---|---|
| Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |
Mozek is available under the terms of the MIT license.
Whether you're building Mozek or building something with Mozek — have fun creating! 🥾