Components — Zuri SASS

Typography

Material 3 type scale. Use the classes directly on any element.

Headline 3

Headline 5

Headline 6

Subtitle 1 — supporting text

Body 1 — lorem ipsum dolor sit amet consectetur adipiscing elit.

Body 2 — smaller paragraph text.

OVERLINE

Caption text

<p class="headline-3">Headline 3</p>
<p class="body-1">Body text</p>

Buttons

Filled default, plus a .btn-<color> class generated for every entry in the theme map.

States

Themed variants

Floating action button

FAB is fixed to the viewport bottom-right in production →

<button class="btn">Default</button>
<button class="btn-primary text-on-primary">Primary</button>
<button class="fab">+</button>

Text fields

Filled (default) and outlined variants with error and disabled states.

Name Filled variant

Email Outlined variant

Password Password is too short

Disabled

<div class="text-field text-field--outlined">
  <label class="text-field__label" for="email">Email</label>
  <input class="text-field__input" id="email" type="email" />
  <span class="text-field__helper">We never share your email.</span>
</div>

Cards

Product card with image, price, description and CTA row.

Tzs 50,000

★ 4.9

A compact product card with image, price and CTA row.

Tables

Styled via .table-content.

Framework	Author	Notes
Zuri SASS	Njox	Material 3 inspired Sass library
Bootstrap	Otto & Thornton	Ubiquitous
Bulma	Jeremy Thomas	Modern, flex-based
Materialize	Google	Material design in CSS

Elevation

Six Material 3 shadow levels — as classes or via @include elevation($level).

Level 0

Level 1

Level 2

Level 3

Level 4

Level 5

<div class="elevation-2">Raised surface</div>

Shape (corner radius)

Seven-step scale: none, xs, sm, md, lg, xl, full.

none

xs

sm

md

lg

xl

full

<div class="shape-md">Rounded corners</div>

Utilities

Spacing (p-*, m-*, gap-*), display, flex alignment, text alignment.

Flex: .d-flex .justify-between .items-center .p-4

left middle right

Spacing: .p-1 … .p-10

p-1 p-3 p-5 p-8

<div class="d-flex justify-between items-center p-4 gap-2">...</div>

Theming

Put .light-theme or .dark-theme on a container — every .bg-* / .text-* class picks up the matching color map.

Light theme

primary secondary tertiary error surface

Dark theme

primary secondary tertiary error surface

<body class="dark-theme">
  <button class="bg-primary text-on-primary">Themed</button>
</body>