The Headings module provides consistent, responsive typography styles for HTML headings (<h1> through <h6>) and corresponding utility classes (.h1 through .h6).

Semantic Elements

<h1>Main Heading</h1>
<h2>Section Title</h2>
<h3>Subsection</h3>
<h4>Minor Heading</h4>
<h5>Detail Heading</h5>
<h6>Smallest Heading</h6>

Utility Classes

<div class="h1">Main Heading</div>
<div class="h2">Section Title</div>
<div class="h3">Subsection</div>
<div class="h4">Minor Heading</div>
<div class="h5">Detail Heading</div>
<div class="h6">Smallest Heading</div>

Use .h1–.h6 when you want the heading styles without semantic HTML.

Beautiful CSS provides a variety of typographic utilities for styling text semantically or with utility classes. Below is a reference of supported styles.

Abbreviations

Use the <abbr> tag with the title attribute to provide the full form of an abbreviation. This helps screen readers and provides a tooltip on hover:

<abbr title="Abbreviation">Abbr.</abbr>

Bold Text

To emphasize text using a heavier font weight, use the <b> tag or the bold utility class:

<b>Bold text</b>
<p class="bold">Bold paragraph</p>

Italic Text

To italicize text, use the <i> tag or the italic utility class:

<i>Italic text</i>
<p class="italic">Italic paragraph</p>

Strikethrough

To display text with a line through it, use the <s> tag or the strikethrough class:

<s>Strikethrough text</s>
<p class="strikethrough">Strikethrough paragraph</p>

Strikethrough on Hover

Apply a strikethrough only when the user hovers over the element using hover:strikethrough:

<span class="hover:strikethrough">Strikethrough on hover</span>

Underline

Underline text using the <u> tag or the underline class:

<u>Underlined text</u>
<p class="underline">Underlined paragraph</p>

Underline on Hover

Underline text only when the user hovers over the element using hover:underline:

<p class="hover:underline">Underlined text on hover</p>

No Decoration

Use no-decoration to remove underline or any other text decoration:

<a class="no-decoration" href="#">Not underlined link</a>

Remove Decoration on Hover

Use hover:no-decoration to remove underline on hover:

<a class="hover:no-decoration" href="#">Underline removed on hover</a>

Small

To render text in a smaller font size, use the <small> tag or the small class:

<small>Small text</small>
<p class="small">Small paragraph</p>

Deleted Text

To indicate deleted or removed content, use the <del> tag or the deleted class:

<del>Deleted text</del>
<p class="deleted">Deleted paragraph</p>

Inserted Text

To mark content that has been added or inserted, use the <ins> tag or the inserted class:

<ins>Inserted text</ins>
<p class="inserted">Inserted paragraph</p>

Handwritten Text

To apply a handwritten or cursive style to text, use the handwritten utility class:

<p class="handwritten">Hanwritten paragraph</p>

Keyboard Input Element

To represent keyboard input, use the semantic <kbd> tag or the keyboard utility class:

<kbd>SHIFT</kbd>
<span class="keyboard">CTRL</span>

This style is typically used for inline user input references, like shortcuts or keys pressed.

Subscript

To display subscript text (commonly used in chemical formulas or math), use the semantic <sub> tag or the subscript utility class:

X<sub>2</sub>
X<span class="subscript">2<span>

Superscript

To display superscript text (commonly used in chemical formulas or math), use the semantic <sup> tag or the superscript utility class:

X<sup>3</sup>
X<span class="superscript">3<span>

Superscript

To display superscript text (commonly used in chemical formulas or math), use the semantic <sup> tag or the superscript utility class:

X<sup>3</sup>
X<span class="superscript">3<span>

Monospace

To apply a monospace (fixed-width) style to text, use the monospace utility class:

<p class="Monospace">Monospace paragraph</p>

Lowercase

Converts all text to lowercase with lowercase utility class:

<p class="lowercase">THIS WILL BECOME LOWERCASE</p>

Capitalize

Capitalizes the first letter of each word with capitalize utility class:

<p class="capitalize">this will become capitalized</p>

Uppercase

Converts all text to uppercase with uppercase utility class:

<p class="uppercase">this will become uppercase</p>

Text Colors utilities

Use text color utility classes to control the color of text elements. These classes follow a clear pattern and support responsive and state-based variants.

Syntax

[color-scheme]:[state]:color-[name]-[shade]

• color-[name] – Applies a base color (e.g., color-red, color-blue)
• color-[name]-[shade] – Uses a specific shade of the color (e.g., color-blue-200)
• [color-scheme] – Applies the color in light or dark mode (e.g., dark:color-green)
• [state]– Applies the color on specific states (e.g., hover:color-purple-600)

You can also use the shorthand text-[name] or text-[name]-[shade] as an alias for color-[name] and color-[name]-[shade], which is more concise and commonly used.

Example

<p class="color-red">This is red.</p>
<p class="color-blue-200">This is light blue.</p>
<p class="light:color-green">Green in light mode.</p>
<p class="dark:hover:color-purple-300">Purple on hover in dark mode.</p>

Output

This is red.

This is light blue.

Green in light mode.

Purple on hover in dark mode.

Notes

• Use color shades like -100, -200, -300, etc., for finer control.
• Variants like light: and dark: enable theme-specific styling.
• State variants (hover:, focus:, etc.) can be combined with theme variants for precise interactivity.

Color list

Shades

Each color includes 11 shade levels, ranging from the lightest (-50) to the darkest (-950). Use these to fine-tune the text color of elements.

Blue Shade Examples

Notes

• Use lower numbers (e.g., -50, -100) for light text colors.
• Use higher numbers (e.g., -800, -950) for dark text colors.
• Combine with mode or state variants for dynamic styles (e.g., dark:hover:color-blue-300).

Color Scheme

You can use theme-based prefixes to apply different text colors based on the active color mode (dark: or light:).

Example

<p class="light:color-red dark:color-blue">Red in light mode and blue in dark mode.</p>

Output

Red in light mode and blue in dark mode.

Notes

• These prefixes can be combined with hover and focus states, like dark:hover:color-green-300.
• Omitting the prefix applies the color in all modes.

Hover

Use the hover: prefix to apply a text color when the user hovers over an element.

Syntax

hover:color-[name]-[shade]

• Triggers the text color change on hover
• Can be combined with other variants like dark: or light:

Example

<p class="hover:color-blue-500">
  Hover over this text to turn it blue.
</p>

Output

Hover over this text to turn it blue.

Background Color utilities

Use background color utility classes to control the background color of elements. These classes follow a clear pattern and support responsive and state-based variants.

Syntax

[color-scheme]:[state]:bg-[name]-[shade]

• bg-[name] – Applies a base color (e.g., bg-red, bg-blue)
• bg-[name]-[shade] – Uses a specific shade of the color (e.g., bg-blue-200)
• [color-scheme] – Applies the color in light: or dark: mode (e.g., dark:bg-green)
• [state]– Applies the color on specific states (e.g., hover:bg-purple-600)

Example

<div class="bg-red">bg-red</div>
<div class="bg-red-400">bg-red-400</div>
<div class="light:bg-green dark:bg-orange">light:bg-green dark:bg-orange</div>
<div class="hover:bg-yellow">hover:bg-yellow</div>
<div class="light:hover:bg-orange-300 dark:hover:bg-purple-300">dark:hover:bg-purple-300</div>

Output

Background Color list

Shades

Each color includes 11 shade levels, ranging from the lightest (-50) to the darkest (-950). Use these to fine-tune the text color of elements.

Red Shade Examples

Use background opacity utility classes to control the transparency level of background colors. These utilities can be used in conjunction with background color bg-[color] definitions.

Syntax

.bg-opacity-[value]

Available Values

Examples

<div class="bg-blue bg-opacity-0">
  Fully Transparent (bg-opacity-0)
</div>

<div class="bg-blue bg-opacity-50">
  Semi-Transparent (bg-opacity-50)
</div>

<div class="bg-blue bg-opacity-100">
  Fully Opaque (bg-opacity-100)
</div>

These utility classes allow you to control the horizontal alignment of text content.

Classes

Use .text-* or .align-* interchangeably based on your preferred naming convention.

Usage Example

Code

<p class="text-left">This text is aligned to the left.</p>
<p class="text-center">This text is centered.</p>
<p class="text-right">This text is aligned to the right.</p>
<p class="text-justify">This text is justified.</p>
<p class="text-start">This text is aligned to the start (depends on direction).</p>
<p class="text-end">This text is aligned to the end (depends on direction).</p>

Output

This text is aligned to the left.

This text is centered.

This text is aligned to the right.

This text is justified.

This text is aligned to the start (depends on direction).

This text is aligned to the end (depends on direction).

Use blockquote elements to display quoted or cited text with optional source attribution.

Basic Blockquote

Create a quoting block using the <blockquote> tag or the .blockquote utilty class :

Code

<blockquote>
  <p>This is a citation example.</p>
</blockquote>

Output

This is a citation example.

Naming a Source

To cite the source of a quote, use the <footer> tag or apply the .footer utility class:

HTML

<blockquote>
  <p>This is a citation example with source</p>
  <footer>— The person who say that</footer>
</blockquote>

Output

This is a citation example with source

These utility classes allow you to apply predefined font sizes using CSS custom properties.

Classes

Usage Example

Code

<p class="fs-sm">This is small text.</p>
<p class="fs-lg">This is large text.</p>
<p class="fs-3xl">This is 3× extra large text.</p>
<p class="fs-6xl">This is 6× extra large text.</p>

Output

This is small text.

This is large text.

This is 3× extra large text.

This is 6× extra large text.

These utility classes allow you to control the appearance and structure of lists (<ul> and <ol>) and their items.

Base Styling

List Style Type Classes

Examples

• Circle item one
• Circle item two

<ul class="list-circle">
  <li>Circle item one</li>
  <li>Circle item two</li>
</ul>

• Square item one
• Square item two

<ul class="list-square">
  <li>Square item one</li>
  <li>Square item two</li>
</ul>

• Bullet removed
• No marker here

<ul class="list-none">
  <li>Bullet removed</li>
  <li>No marker here</li>
</ul>

1. Item 1
2. Item 2

<ol class="mt-5">
  <li>Item 1</li>
  <li>Item 2</li>
</ol>

The margin utility classes allow you to quickly apply consistent spacing around elements using a standardized spacing scale. All classes are built to support responsive design with mobile-first breakpoints.

Examples

<div class="m-7">...</div>
<div class="mx-auto">...</div>
<div class="mx-5">...</div>
<div class="mt-0">...</div>
<div class="mr-sm-2">...</div>

Basic Syntax

<div class="m-{value}">...</div>
<div class="mx-{value}">...</div>
<div class="mt-{value}">...</div>
<div class="mr[-breakpoint]-{value}">...</div>
<!-- and so on -->

• {value}: 0 to 7 or auto

• Direction prefixes:

  • m: all sides
  • mx: left & right
  • my: top & bottom
  • mt: top
  • mr: right
  • mb: bottom
  • ml: left

Spacing Scale

Responsive Variants

Use responsive prefixes to apply different margins at different breakpoints.

<div class="m-2 m-md-4 m-lg-6">...</div>

Class Reference

All Sides

.m-{0–7}
.m-auto

Horizontal Margins

.mx-{0–7}
.mx-auto

Vertical Margins

.my-{0–7}
.my-auto

Individual Sides

.mt-{0–7}   .mt-auto    /* top */
.mr-{0–7}   .mr-auto    /* right */
.mb-{0–7}   .mb-auto    /* bottom */
.ml-{0–7}   .ml-auto    /* left */

Responsive

For every class above, you can prefix it with a breakpoint:

.m-sm-{value}
.mx-md-{value}
.mt-lg-{value}
.ml-xl-auto

Example

<div class="m-0">No margin</div>
<div class="mx-3 my-2">Custom horizontal and vertical margins</div>
<div class="mt-4 mb-1">Top and bottom margins</div>
<div class="m-auto">Centered</div>
<div class="m-2 m-md-5 m-xl-7">Responsive margin</div>

Notes

• All utilities use !important to ensure high specificity.
• These utilities are mobile-first; larger breakpoints override smaller ones.

The padding utility classes allow you to quickly apply consistent inner spacing within elements using a standardized spacing scale. All classes support responsive design with mobile-first breakpoints.

Examples

<div class="p-7">...</div>
<div class="px-0">...</div>
<div class="py-5">...</div>
<div class="pt-1">...</div>
<div class="pl-lg-3">...</div>

Basic Syntax

<div class="p-{value}">...</div>
<div class="px-{value}">...</div>
<div class="pt-{value}">...</div>
<div class="pl[-breakpoint]-{value}">...</div>
<!-- and so on -->

• {value}: 0 to 7

• Direction prefixes:

  • p: all sides
  • px: left & right
  • py: top & bottom
  • pt: top
  • pr: right
  • pb: bottom
  • pl: left

Spacing Scale

Responsive Variants

Use responsive prefixes to apply different paddings at different breakpoints.

<div class="p-2 p-md-4 p-lg-6">...</div>

Class Reference

All Sides

.p-{0–7}

Horizontal Paddings

.px-{0–7}

Vertical Paddings

.py-{0–7}

Individual Sides

.pt-{0–7}    /* top */
.pr-{0–7}    /* right */
.pb-{0–7}    /* bottom */
.pl-{0–7}    /* left */

Responsive

All classes above support responsive breakpoints:

.p-sm-{value}
.px-md-{value}
.pt-lg-{value}
.pl-xl-{value}

Example

<div class="p-0">No padding</div>
<div class="px-3 py-2">Custom horizontal and vertical paddings</div>
<div class="pt-4 pb-1">Top and bottom paddings</div>
<div class="p-2 p-md-5 p-xl-7">Responsive padding</div>

Notes

• All utilities use !important to ensure high specificity.
• These utilities are mobile-first; larger breakpoints override smaller ones.

The display utilities allow you to control the display property of elements, with support for hover states and responsive breakpoints.

Basic Display

Example

<div class="d-block bg-red">Block element (takes full width)</div>
<div class="d-inline-block bg-blue">Inline element (fits content)</div>

Responsive Variants

Available breakpoints:

• sm ≥ 40rem
• md ≥ 48rem
• lg ≥ 64rem
• xl ≥ 80rem
• xxl ≥ 96rem

Pattern: .d-[breakpoint]-[value]

Examples

<div class="d-block d-md-none">Visible on <b>mobile</b></div>
<div class="d-none d-md-block">Visible on <b>large display</b></div>

Hover Variants

Use hover: prefixed classes to change display on hover.

Example

<div class="d-inline-block hover:d-block">Hover me</div>

The table utilities provide a clean, accessible, and theme-aware style for tabular data. Tables are styled with spacing, consistent borders, and optional striping for better readability.

Example

<table class="table-striped">
  <thead>
    <tr>
      <th>Item</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Apple</td>
      <td>$1.00</td>
    </tr>
    <tr>
      <td>Banana</td>
      <td>$0.50</td>
    </tr>
  </tbody>
</table>

Striped Table Rows

Buttons styled with semantic or brand color themes. Each color button supports multiple states and modifiers like .outline, .active, .disabled, .square, and .circular.

Base Class: .btn-[color]

<button class="btn-[color]">Simple Button</button>

Button Color list

Custom Color

You can customize button colors using utility classes by combining .btn with background color utilities like .bg-[color]-[shade] and .hover:bg-[color]-[shade].

<button class="btn bg-blue-300 hover:bg-blue-400">Simple Button</button>

Button Sizes

Use size utility classes to adjust the button’s font size and padding. These classes can be combined with any .btn variant.

<button class="btn-xs btn-purple">Extra Small Button</button>

If no size class is specified, the button uses the default .btn size.

Button Styles

Customize the shape of buttons using utility classes that control their border radius and proportions.

Outline Button

Add the .outline class to create a hollow button style.

<button class="btn-blue outline">Outline button</button>

Use outline buttons when you want a lighter visual touch or to balance visual hierarchy next to solid buttons.

Rounded Pill

.rounded-pill Creates a pill-shaped button with fully rounded ends. Ideal for badges, tags, or soft, rounded UI.

<button class="btn-blue rounded-pill">.rounded-pill</button>

Circular Button

.btn-circular creates a perfectly circular button, typically used for icons or floating action buttons (FAB). Ensures a 1:1 aspect ratio.

<button class="btn-blue btn-circular">+</button>

Square Button

.btn-square creates a square button by forcing a 1:1 aspect ratio. Useful for tool buttons or grid layouts.

<button class="btn-blue btn-square">≡</button>

Disabled State

The :disabled pseudo-class visually indicates that the button is not interactive. Disabled buttons:

• Appear faded or desaturated to signal inactivity.
• Use cursor: not-allowed to reinforce their disabled state.
• Ignore hover, focus, and active styles.

<button class="btn-blue" disabled>Disabled</button>

Here’s a clear and useful description for the active state section in your button documentation:

Active State

The .active class visually indicates that the button is currently selected, pressed, or toggled. It is useful for:

• Toggle buttons (on/off states)
• Multi-button selections
• Navigation highlights

<button class="btn btn-blue active">Active</button>

Note: Make sure the button is not disabled, as :disabled takes precedence over .active.

The :disabled pseudo-class visually indicates that the button is not interactive. Disabled buttons:

• Appear faded or desaturated to signal inactivity.
• Use cursor: not-allowed to reinforce their disabled state.
• Ignore hover, focus, and active styles.

Example

<button class="btn-blue" disabled>Disabled</button>

Disabled Button Color list

–

The .active class visually indicates that the button is currently selected, pressed, or toggled. It is useful for:

• Toggle buttons (on/off states)
• Multi-button selections
• Navigation highlights

Note: Make sure the button is not disabled, as :disabled takes precedence over .active.

Example

<button class="btn btn-blue active">Active</button>

Active Button Color list

Use size utility classes to adjust the button’s font size and padding. These classes can be combined with any .btn or btn-[name] variants.

Examples

<button class="btn-xs btn-green">Extra small button</button>

<button class="btn-xl btn-green">Extra large button</button>

Full Width

Use .w-100 to create a full width button:

<button class="btn-green w-100">Full width button</button>

Customize the shape of buttons using utility classes that control their border radius and proportions.

Outline Button

Add the .outline class to create a hollow button style.

<button class="btn-pink outline">Outline button</button>

Rounded Pill

.rounded-pill Creates a pill-shaped button with fully rounded ends. Ideal for badges, tags, or soft, rounded UI.

<button class="btn-pink rounded-pill">.rounded-pill</button>

Circular Button

.btn-circular creates a perfectly circular button, typically used for icons or floating action buttons (FAB). Ensures a 1:1 aspect ratio.

<button class="btn-pink btn-circular">+</button>

Square Button

.btn-square creates a square button by forcing a 1:1 aspect ratio. Useful for tool buttons or grid layouts.

<button class="btn-pink btn-square">≡</button>

Borders

Combine the .btn classes with .border-[side]-[width] to specify the border size on each side :

<button class="btn-pink border-5 border-purple-800 ">Borders</button>

<button class="btn-pink border-top-5 border-purple-800">Top Border</button>

<button class="btn-pink border-5 border-top-0 border-purple-800">No border on top</button>

Form controls are used to style and standardize common form elements such as inputs, selects, and textareas. These utilities provide accessible, responsive, and theme-aware UI elements with support for validation, focus styling, and dark mode.

Basic Markup

<label for="example" class="form-label">Your name</label>
<input type="text" id="example" class="form-control" placeholder="Enter your name">

Use .form-label for consistent label spacing, and .form-control for styled form elements.

Examples

Input Text

<label for="exampleFormControlInputText" class="form-label">Text input</label>
<input type="text" class="form-control" id="exampleFormControlInputText" placeholder="Default Input">

Password

<label for="exampleFormControlPassword" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleFormControlPassword" placeholder="••••••••" autocomplete="off">

Text Area

<label for="exampleFormControlTextarea" class="form-label">Textarea</label>
<textarea type="password" class="form-control" id="exampleFormControlTextarea" rows="5" placeholder="Comments"></textarea>

File Input

<div class="mb-4">
  <label for="exampleFormFile" class="form-label">File input</label>
  <input class="form-control" type="file" id="exampleFormFile">
</div>

Select Dropdowns

<label for="exampleFormControlTextarea" class="form-label">Select</label>
<select class="form-control" aria-label="Default select example">
  <option selected>Select</option>
  <option value="1">First choice</option>
  <option value="2">Second choice</option>
  <option value="3">Third choice</option>
</select>

Disabled State

Use the disabled attribute to visually indicate that a field is not editable. Disabled inputs appear dimmed and use alternate border and placeholder colors based on the theme.

<input class="form-control" placeholder="Disabled input" disabled>
<input class="form-control" type="file" disabled>

Validation States

Add .valid or .invalid classes to style form fields based on validation.

<input class="form-control valid" placeholder="Valid input">
<input class="form-control invalid" placeholder="Invalid input">

Size

You can change the font size of form controls to create smaller or larger inputs using text size utility classes like .fs-xs or .fs-2xl. These changes affect both the input’s text size and, indirectly, its overall visual footprint.

<input type="text" class="form-control fs-xs p-1" placeholder="Small input">
<input type="text" class="form-control fs-2xl" placeholder="Large input">

Without Border

Add .border-0 to remove borders from form controls:

<input class="form-control border-0" disabled placeholder="Input without borders">

Disabled State

Use the disabled attribute to visually indicate that a field is not editable. Disabled inputs appear dimmed and use alternate border and placeholder colors based on the theme.

<input class="form-control" placeholder="Disabled input" disabled>
<input class="form-control" type="file" disabled>

Size

You can change the font size of form controls to create smaller or larger inputs using text size utility classes like .fs-xs or .fs-2xl. These changes affect both the input’s text size and, indirectly, its overall visual footprint.

<input type="text" class="form-control fs-xs p-1" placeholder="Small input">
<input type="text" class="form-control fs-2xl" placeholder="Large input">

Validation States

Add .valid or .invalid classes to style form fields based on validation.

<input class="form-control valid" placeholder="Valid input">
<input class="form-control invalid" placeholder="Invalid input">

Rounded Pill

To give inputs a pill-shaped appearance, add the .rounded-pill class. This applies a large border-radius to create fully rounded edges.

<input class="form-control rounded-pill" placeholder="Rounded Pill Input">

Without Border

Use the .border-0 utility to remove borders from form controls when a minimal or embedded style is desired.

<input class="form-control border-0" disabled placeholder="Input without borders">

Input groups combine text inputs with icons, buttons, or labels for enhanced UI patterns such as search bars, usernames, or formatted inputs.

Wrap the content in a .input-group container to align form controls and addons horizontally.

Basic Input Group

Use .input-group-text to prepend or append static text or symbols.

<div class="input-group">
  <span class="input-group-text">@</span>
  <input type="text" class="form-control" placeholder="Username">
</div>

Search Bar with Buttons

Input groups can include buttons for actions like search or clear. Combine buttons and inputs inside a .input-group for layout.

<div class="input-group rounded-pill">
  <button class="btn-grey px-3">
    <img src="magnifying-glass.png">
  </button>
  <input type="text" class="form-control" placeholder="Search">
  <button class="btn-grey px-3">
    <img src="xmark.png">
  </button>
</div>

Custom Themed Input Group

Use utility classes for dynamic theming. This example demonstrates:

• Pill shape via .rounded-pill
• Color theming using light: and dark: prefixes
• Transparent backgrounds and interactive styling on buttons

<div
  class="input-group mb-4 rounded-pill dark:border-purple-700 light:border-green-300 dark:color-white-900 light:color-black-100">
  <button class="btn dark:bg-purple-700 dark:hover:bg-purple-500 light:bg-green-300 light:hover:bg-green-500 px-3">
    <img src="magnifying-glass.png">
  </button>
  <input type="text" class="form-control bg-cyan-lighter-5" placeholder="Custom">
  <button class="btn dark:bg-purple-700 dark:hover:bg-purple-500 light:bg-green-300 light:hover:bg-green-500 px-3">
    <img src="xmark.png">
  </button>
</div>

💡 Use .rounded-pill for a softer, modern appearance. Customize further with background, border, and icon classes to match your theme.

The border color utilities allow you to apply consistent and theme-aware border colors using semantic class names. These utilities are compatible with both light and dark mode out of the box.

Syntax

[color-scheme]:[state]:border-[name]-[shade]

• border-[name] – Applies a base color (e.g., border-red, border-blue)
• border-[name]-[shade] – Uses a specific shade of the color (e.g., border-blue-200)
• [color-scheme] – Applies the color in light: or dark: mode (e.g., dark:border-green)
• [state]– Applies the color on specific states (e.g., hover:border-purple-600)

The defautl border width is 0. To display the border, you have to specify the border width (border, border-1, border-2 etc.).

Example

<div class="border border-red">border-red</div>

<div class="border border-red-800">border-red-800</div>

<div class="border light:border-green dark:border-orange">light:border-green dark:border-orange</div>

<div class="border hover:border-yellow">hover:border-yellow</div>

<div class="border light:hover:border-orange-300 dark:hover:border-purple-300">dark:hover:border-purple-300</div>

Border Color list

Shades

Each color includes 11 shade levels, ranging from the lightest (-50) to the darkest (-950). Use these to fine-tune the text color of elements.

Red Shade Examples

Use the .border-* utility classes to control the border width of elements. These classes provide consistent spacing and visual weight, ranging from no border to thick borders.

Class Reference

All classes include !important to ensure override priority.

Examples

<!-- No border -->
<div class="border-0">No border</div>

<!-- Default border -->
<div class="border">1px border</div>

<!-- Thick border -->
<div class="border-4">Thick border</div>

Basic Syntax

<div class="border-{n}">...</div>

• {n} ranges from 0 to 5
• border is equivalent to border-1

Notes

• These utilities apply to all sides of the element.
• You can combine with border-color and border-style utilities for full customization.

These classes allow you to individually control the border width on each side of an element (top, right, bottom, left), as well as horizontal (x) and vertical (y) axes. Useful for selectively applying border thickness while maintaining full design flexibility.

Syntax

<div class="border-top-3">...</div>
<div class="border-left">...</div>
<div class="border-x-0">...</div>

Available Values

• 0 — Removes the border
• 1 (or none) — 1px border
• 2 to 5 — Pixel-based border thickness

.border-[side] is a shorthand for .border-[side]-1.

Example

<!-- Only top border -->
<div class="border-top-3 border-solid">Top border 3px</div>

<!-- Horizontal borders (left & right) -->
<div class="border-x-2 border-dashed">X-axis border</div>

<!-- Top and right border -->
<div class="border-top-1 border-right-1">All borders except bottom</div>

<!-- No bottom border -->
<div class="border border-bottom-0">All borders except bottom</div>

Class Reference

Top Border

Right Border

Bottom Border

Left Border

Horizontal Borders (X-Axis)

Vertical Borders (Y-Axis)

Use .border-* style classes to control the style of the border lines, such as solid, dashed, dotted, or double.

Class Reference

Examples

<div class="border border-solid">Solid Border</div>

<div class="border-2 border-dashed">Dashed Border</div>

<div class="border-1 border-dotted">Dotted Border</div>

<div class="border-3 border-double">Double Border</div>

Notes

• These classes only define the style, not the width or color. Use them with:

  • border, border-2, etc. for width
  • border-red, light:border-grey-100, etc. for color

Use the .rounded-* utility classes to control the border radius (rounded corners) of elements. These classes allow consistent spacing-based rounding or special shapes like pill borders.

Syntax

.rounded-[value]

Where [value] is a number from 0 to 7, or pill.

Available Classes

Examples

<div class="rounded-0">No rounding</div>

<div class="rounded-3">Moderate rounding</div>

<div class="rounded-pill">Pill-shaped element</div>

Cards are flexible content containers that can include headers, bodies, footers, and even images. Use them to group related information in a visually distinct block.

Basic Structure

<div class="card">
  <div class="header">...</div>
  <div class="body">...</div>
  <div class="footer">...</div>
</div>

• .card – the container for the card component.
• .header – optional section used for titles, images, or actions.
• .body – main content area of the card.
• .footer – optional section for actions or metadata.

Card with Multiple Headers

You can insert multiple headers within a card for complex layouts.

Preview

<div id="card" class="card">
  <div class="header"><h2>Card with Headers</h2></div>
  <div class="body">Example of card with several <b>headers</b>.</div>  
  <div class="header"><h2>Another Headers</h2></div>  
  <div class="body">You can insert multiple <b>headers</b> in a single card.</div>  
  <div class="footer align-right">
     <button class="btn-blue" data-open-modal="documentation-modal" data-documentation="card">Do something</button>
  </div>
</div>

• Headers can appear at multiple positions inside the card.
• Alternate headers and bodies to separate content logically.
• Use .align-right in the footer to align buttons to the right.

Card with Image Header

Headers can also be replaced with an image for a more visual layout.

Preview

Card Title

Example of a card with an image for blog posts, user cards, and many more.

Do something

<div class="card">
  <img class="header" src="/images/card-header.jpg">
  <div class="body">
    <h3>Card Title</h3>
    <p>Example of a card with an image for blog posts, user cards, and many more.</p>
  </div>
  <div class="footer align-right">
    <button class="btn-blue">Do something</button>
  </div>
</div>

• An <img> element with the .header class is used to display an image at the top.
• Ideal for use cases like blog cards, product cards, or profile previews.

Cards are flexible content containers that can include headers, bodies, footers, and even images. Use them to group related information in a visually distinct block.

Basic Structure

<div class="card">
  <div class="header">...</div>
  <div class="body">...</div>
  <div class="footer">...</div>
</div>

• .card – the container for the card component.
• .header – optional section used for titles, images, or actions.
• .body – main content area of the card.
• .footer – optional section for actions or metadata.

Card with Image Header

Headers can also be replaced with an image for a more visual layout.

Preview

Card Title

Example of a card with an image for blog posts, user cards, and many more.

Do something

<div class="card">
  <img class="header" src="/images/card-header.jpg">
  <div class="body">
    <h3>Card Title</h3>
    <p>Example of a card with an image for blog posts, user cards, and many more.</p>
  </div>
  <div class="footer align-right">
    <button class="btn-blue">Do something</button>
  </div>
</div>

• An <img> element with the .header class is used to display an image at the top.
• Ideal for use cases like blog cards, product cards, or profile previews.

The modal component is a dialog box that can be shown or hidden dynamically. It uses the native HTML <dialog> element enhanced with utility classes and data attributes for consistent behavior and styling.

⚠️ Beautiful CSS provides only CSS styles. You can write your own JavaScript to manage modal interactions or use our dedicated utility library:

• npm
• GitHub

HTML Structure

<dialog class="modal">
  <div class="modal-content">
    <header></header>
    <div></div>
    <footer></footer>
  </div>
</dialog>

The modal content is structured into three elements:

• <header>: Contains the modal title and close button.
• <div>: Main content area of the modal.
• <footer>: Footer of the modal

class="modal" Applies base styling for visibility, animation, and positioning.

Examples

Basic Example

This example is a starting point for building modals.

<dialog id="my-modal" class="modal" data-scroll-to="top" data-close-modal>
  <div class="modal-content">
    <header>
      <h2 class="mt-0">Title</h2>
      <button type="button" class="btn-close" data-close-modal aria-label="Close"></button>
    </header>
    <div>
      Here is the main content
    </div>
    <footer class="align-right">
      <button class="btn-blue" data-close-modal>Close</button>
    </footer>
  </div>
</dialog>

Modal Without Animation

To disable the modal’s opening and closing animations, add the .no-animation class to the <dialog> element:

<dialog id="my-modal" class="modal no-animation" data-close-modal>
  <div class="modal-content">
    <header></header>
    <div></div>
    <footer></footer>
  </div>
</dialog>

Without Backdrop Blur

To disable the blur effect on the background when the modal is open, add the .no-blur class to the <dialog> element:

<dialog id="my-modal" class="modal no-blur" data-close-modal>
  <div class="modal-content">
    <header></header>
    <div></div>
    <footer></footer>
  </div>
</dialog>

Modal Width

The modal tries to respect the preferred width of the .modal-content element, as long as it fits within the viewport.

<div class="modal-content w-500px">

This example shows a modal that spans the entire width of the viewport, while still respecting a maximum width to avoid overly wide content on large screens.

<dialog id="my-modal" class="modal" data-close-modal>
  <div class="modal-content w-100vw">
    <header></header>
    <div></div>
    <footer></footer>
  </div>
</dialog>

You can repla

Centered Modal

This example demonstrates a centered modal:

<dialog id="my-modal" class="modal" data-close-modal>
  <div class="modal-content mx-auto">
    <header></header>
    <div></div>
    <footer></footer>
  </div>
</dialog>

Attributes

The following attributes are intended to work with our dedicated library (npm, github), otherwise developer have to write its own JavaScript logiccode to manage theses options :

• id="my-modal" – Unique identifier for targeting the modal via JavaScript.
• data-scroll-to="top" (Optional) – When added to <dialog>, it automatically scrolls the modal content to the top when opened.
• data-close-modal – Can be added to any element inside the modal to close it when clicked (e.g., close button, background click). When added to the <dialog>, it closes the modal when the user clicks outside the modal.

Opening Button

Use data-open-modal on a button to open a specific modal:

<button class="btn-green" data-open-modal="my-modal">Open Modal</button>

Closing Cross

The following code creates a close button styled as a cross:

<button type="button" class="btn-close" data-close-modal aria-label="Close"></button>

• .btn-close: – Overrides the default button style to appear as a close icon (“X”).

Use [data-close-modal] on buttons or overlays to allow declarative closing via JavaScript event delegation.

Classes

The following optional classes can be added to the <dialog> element to control modal behavior:

• .no-animation: prevent animation when opening / closing the modal
• .no-blur: prevent the background blur effect when the modal is opened
• .my-auto: center the modal verticaly in the viewport

Add w-100vw and w-max-100 to .modal-content to create a full-width modal.

Basic JavaScript Usage

Since the modals are based on the HTML dialog element, you can control them with plain JavaScript:

// Show the modal programmatically
document.getElementById('my-modal').showModal();

// Close the modal manually
document.getElementById('my-modal').close();

Note: Beautiful CSS includes open/close animations that may need to be accounted for when managing visibility manually.

Use the horizontal grid system to build flexible, responsive layouts with a set number of columns. These utilities allow you to quickly create multi-column layouts and control how wide elements span across the grid.

Grid Columns

Use .h-grid-N to define a grid with a fixed number of columns.

Examples

<div class="h-grid gap-3">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
</div>

<div class="h-grid-3 gap-3">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
  <div>06</div>
  <div>07</div>
</div>

Column Spanning

Use .h-span-X on grid items to make them span multiple columns.

Example

<div
  class="h-grid-6 gap-3">
  <div>01</div>
  <div class="h-span-2">02</div>
  <div>03</div>
  <div>04</div>
</div>

This creates a 6-column grid where the second item spans 2 columns.

Row Spanning

Use .v-span-X on grid items to make them span multiple rows.

Example

<div class="h-grid-3 gap-3">
  <div class="v-span-2">01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>  
</div>

This creates a 3-column grid where the first item spans 2 rows.

Gap Utilities

The .gap-* utility classes let you quickly control the spacing between flex or grid items using a consistent spacing scale.

They apply the native CSS gap property, which works with both flex and grid containers.

Basic Syntax

<div class="gap-{n}">...</div>

• {n} is a number between 0 and 7

Use the vertical grid system to build flexible, responsive layouts with a set number of rows. These utilities allow you to quickly create multi-rows layouts and control how wide elements span across the grid.

Grid Rows

Use .v-grid-N to define a grid with a fixed number of rows.

Examples

<div class="v-grid gap-3">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
</div>

<div class="v-grid-3 gap-3">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
  <div>06</div>
  <div>07</div>
</div>

Row Spanning

Use .v-span-X on grid items to make them span multiple rows.

Example

<div class="v-grid-3 gap-3">
  <div class="v-span-2">01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>  
</div>

This creates a 3-row grid where the first item spans 2 rows.

Column Spanning

Use .h-span-X on grid items to make them span multiple columns.

Example

<div
  class="v-grid-6 gap-3">
  <div>01</div>
  <div class="h-span-2">02</div>
  <div>03</div>
  <div>04</div>
</div>

This creates a 6-row grid where the second item spans 2 columns.

Gap Utilities

The .gap-* utility classes let you quickly control the spacing between flex or grid items using a consistent spacing scale.

They apply the native CSS gap property, which works with both flex and grid containers.

Basic Syntax

<div class="gap-{n}">...</div>

• {n} is a number between 0 and 7

These utility classes help you control horizontal layout (flex-direction: row) and horizontal alignment (justify-content) using simple and expressive class names.

They use display: flex and align items along the main (horizontal) axis.

Class Reference

h-flex is a shorthand for .v-flex-start.

Basic Syntax

<div class="h-flex-{alignment}">...</div>

Where {alignment} is one of: start, end, center, between, around, evenly.

Examples

<div class="h-flex-start gap-3">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

<div class="h-flex-end gap-3">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

<div class="h-flex-center gap-3">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

<div class="h-flex-between gap-3">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

<div class="h-flex-around gap-3">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

<div class="h-flex-evenly gap-3">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

Flex Grow Utilities

Control how flexible a flex item should grow relative to the rest of the items with .grow-{n} classes.

Basic Syntax

<div class="grow-{n}">...</div>

• {n} is a number between 0 and 7
• Maps to flex-grow: n

Example

<div class="h-flex-between gap-3">
  <div>01</div>
  <div class="grow-1">02</div>
  <div>03</div>
</div>

Gap Utilities

The .gap-* utility classes let you quickly control the spacing between flex or grid items using a consistent spacing scale.

They apply the native CSS gap property, which works with both flex and grid containers.

Basic Syntax

<div class="gap-{n}">...</div>

• {n} is a number between 0 and 7

Align Self Utilities

Use the .self-* utility classes to control the alignment of individual flex items along the cross axis (usually vertical). These classes apply the align-self CSS property, allowing overrides of the container’s align-items value on a per-element basis.

Syntax

.self-[value]

Where [value] corresponds to a valid align-self keyword.

Available Classes

Example

<div class="h-flex h-128px gap-3">
  <div class="self-start">Start</div>
  <div class="self-center">Center</div>
  <div class="self-stretch">Stretch</div>
  <div class="self-end">End</div>
</div>

These utility classes help you control vertical layout (column-based flex-direction) and vertical alignment (justify-content) using concise and semantic class names.

Class Reference

v-flex is a shorthand for .v-flex-start.

Basic Syntax

<div class="v-flex-{alignment}">...</div>

Where {alignment} is one of: start, end, center, between, around, evenly.

Examples

<div class="v-flex-start gap-3">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

<div class="v-flex-end gap-3">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

<div class="v-flex-center gap-3">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

<div class="v-flex-between gap-3">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

<div class="v-flex-around gap-3">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

<div class="v-flex-evenly gap-3">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

Flex Grow Utilities

Control how flexible a flex item should grow relative to the rest of the items with .grow-{n} classes.

Basic Syntax

<div class="grow-{n}">...</div>

• {n} is a number between 0 and 7
• Maps to flex-grow: n

Example

<div class="v-flex-between gap-3">
  <div>01</div>
  <div class="grow-1">02</div>
  <div>03</div>
</div>

Gap Utilities

The .gap-* utility classes let you quickly control the spacing between flex or grid items using a consistent spacing scale.

They apply the native CSS gap property, which works with both flex and grid containers.

Basic Syntax

<div class="gap-{n}">...</div>

• {n} is a number between 0 and 7

Align Self Utilities

Use the .self-* utility classes to control the alignment of individual flex items along the cross axis (usually vertical). These classes apply the align-self CSS property, allowing overrides of the container’s align-items value on a per-element basis.

Syntax

.self-[value]

Where [value] corresponds to a valid align-self keyword.

Available Classes

Example

<div class="v-flex w-128px gap-3">
  <div class="self-start">Start</div>
  <div class="self-center">Center</div>
  <div class="self-stretch">Stretch</div>
  <div class="self-end">End</div>
</div>

The flex-wrap utility controls whether flex items are forced onto a single line or can wrap onto multiple lines, and if wrapping occurs, in which direction.

By default, flex items will not wrap and try to fit in a single row.

Classes

Examples

No Wrap (Default)

<div class="h-flex-start flex-nowrap gap-4">
  <div class="bg-red">01</div>
  <div class="bg-red">02</div>
  <div class="bg-red">03</div>
</div>

Items stay in a single row, overflowing if there is not enough space.

Wrap

<div class="h-flex-start flex-wrap gap-4">
  <div class="bg-red">01</div>
  <div class="bg-red">02</div>
  <div class="bg-red">03</div>
</div>

Items will wrap onto the next line when there isn’t enough space.

Wrap Reverse

<div class="h-flex-start flex-wrap-reverse gap-4">
  <div class="bg-red">01</div>
  <div class="bg-red">02</div>
  <div class="bg-red">03</div>
</div>

Items wrap onto multiple lines but in reverse order (from bottom to top).

Control how replaced elements like <img> or <video> should be resized to fit their container using the object-fit property.

Syntax

.object-[fit]

Where [fit] can be:

Use these classes to manage how media behaves inside fixed-size containers.

The .fit-* classes are shorthand aliases for their corresponding .object-* utilities, providing an alternate, shorter syntax for controlling the object-fit behavior of media elements.

Examples

Fit inside the container

Use object-contain to make the content fit entirely within the container without clipping. The aspect ratio is preserved, and empty space may appear.

<img src="image.jpg" class="h-100 w-100 object-contain">

Cover the container

Use object-cover to fill the container while preserving the aspect ratio. The image will be clipped if necessary.

<img src="image.jpg" class="h-100 w-100 object-cover">

Stretch to fill

Use object-fill to make the content fill the container regardless of its aspect ratio. This may distort the content.

<img src="image.jpg" class="h-100 w-100 object-fill">

Scale down if needed

Use object-scale-down to display the content at its original size unless it’s too large—then it scales down to fit the container.

<img src="image.jpg" class="h-100 w-100 object-scale-down">

Use original size only

Use object-none to keep the original size of the content, ignoring the container dimensions. It may overflow if the content is larger.

<img src="image.jpg" class="h-100 w-100 object-none">

The framework provides different loader styles, each animated with CSS. They can be customized with size, color, scaling, and animation speed utilities.

Circular Spinner

.loader creates a circular spinner that rotates a bordered ring.

• Use .color-* to set the primary stroke color.
• Use .border-color-* to set the background stroke color.

Examples

<span class="loader"></span>
<span class="loader color-orange"></span>
<span class="loader color-red border-pink"></span>
<span class="loader color-green border-transparent"></span>
<span class="loader color-transparent border-cyan"></span>

Clipped Border Spinner

.loader-clip creates a clipped border spinner that animates as a rotating arc.

• Use .color-* to change the spinner color.

Examples

<span class="loader-clip"></span>
<span class="loader-clip color-red"></span>
<span class="loader-clip color-green animation-duration-2000"></span>

Pulsing Loader

.loader-grow creates a pulsing loader that expands and fades in/out.

• Use .bg-* to set the fill color.

Examples

<span class="loader-grow"></span>
<span class="loader-grow color-red"></span>
<span class="loader-grow color-green animation-duration-2000"></span>

Fading Dots

.loader-dots-fade creates three fading dots that appear and disappear sequentially.

• Use .color-* to change the dots color.

Examples

<span class="loader-dots-fade"></span>
<span class="loader-dots-fade color-red"></span>
<span class="loader-dots-fade color-green animation-duration-2000"></span>

Rotating Dots

.loader-dots-spin creates three rotating dots arranged in a circular path.

• Use .color-* to change the dots color.

Examples

<span class="loader-dots-spin"></span>
<span class="loader-dots-spin color-red"></span>
<span class="loader-dots-spin color-green animation-duration-2000"></span>

Comet-Style Loader

.comet-style creates a comet-style loader where dots rotate with a trailing fade effect.

• Use .color-* to change the dots color.

Examples

<span class="loader-comet"></span>
<span class="loader-comet color-red"></span>
<span class="loader-comet color-green animation-duration-2000"></span>

Sizing

There are several ways to size the loaders. The most flexible option is to use the utility class .scale-[ratio].

<span class="loader scale-50"></span>
<span class="loader-clip scale-75"></span>
<span class="loader-grow"></span>
<span class="loader-dots-fade scale-110"></span>
<span class="loader-dots-spin scale-120"></span>
<span class="loader-comet scale-150"></span>

For .loader-dots-fade, .loader-dots-spin and .loader-comet, dots are generated with box-shadow.

• The dot size depends on the element’s height.
• The loader’s overall size is relative to the element’s font size.

You can adjust both independently to fine-tune the effect:

<span class="loader-dots-fade fs-xs"></span>
<span class="loader-dots-spin h-16px"></span>
<span class="loader-comet fs-5xl h-4px"></span>

The scale utility classes visually resize elements using transform: scale().

Syntax

[state]:scale-[ratio]

• [state] – (optional) hover or focus.
• [ratio] – The desired scale percentage (e.g. 105 → 105% → scale(1.05))

Usage Examples

<!-- Static scale -->
<div class="scale-90">Scaled to 90%</div>

<!-- On hover -->
<div class="hover:scale-110">Scales to 110% on hover</div>

<!-- On focus -->
<input type="text" class="form-control focus-scale-105" />

Available Classes

Transition Utilities

Use transition utilities to animate property changes smoothly, especially useful with scaling and transform effects.

Duration Classes

Transition Properties

Example with Transitions

<div class="btn hover:scale-120 transition-transform duration-300">Hover me</div>

Notes

• Combine .transition-transform with .duration-* for smooth scaling.
• Use .transition if multiple CSS properties (e.g., color, box-shadow) should animate together.
• Ensure elements with transforms do not interfere with layout (e.g., overlapping or scaling out of bounds).

Control the rotation of elements using the .rotate-* classes. Useful for rotating icons, buttons, and other UI elements.

Syntax

.rotate-[angle]

Optional variants:

• hover:rotate-[angle]: Applies the rotation on hover.
• transition-rotate: Enables smooth rotation transitions.
• duration-[time]: Defines transition duration.

Examples

<div class="rotate-180">Upside down</div>

<div class="rotate-90">Hover me</div>

This rotates the icon by 90° when hovered, with a smooth 300ms transition.

Class Reference

Static Rotation

Hover Rotation

Transition Utilities

Use transition utilities to animate property changes smoothly, especially useful with scaling and transform effects.

Duration Classes

Transition Properties

Example with Transitions

<div class="rotate-180 hover:rotate-0 transition-rotate duration-500">Hover me</div>

Notes

• Combine .transition-rotate with .duration-* for smooth rotation.
• Use .transition if multiple CSS properties (e.g., color, box-shadow) should animate together.
• Ensure elements with transforms do not interfere with layout (e.g., overlapping or scaling out of bounds).

Use cursor utility classes to control the mouse pointer appearance on hover. These classes map directly to standard CSS cursor values, making it easy to indicate interactivity or context.

Syntax

.cursor-[value]

Where [value] is a supported cursor type.

Available Classes

Examples

<div class="cursor-pointer">cursor-pointer</div>
<div class="cursor-wait">cursor-wait</div>
<div class="cursor-text">cursor-text</div>
<div class="cursor-help">cursor-help</div>
<div class="cursor-crosshair">cursor-crosshair</div>
<div class="cursor-not-allowed">cursor-not-allowed</div>
<div class="cursor-zoom-in">cursor-zoom-in</div>
<div class="cursor-zoom-out">cursor-zoom-out</div>
<div class="cursor-grab">cursor-grab</div>
<div class="cursor-default">cursor-default</div>
<div class="cursor-auto">cursor-auto</div>

Use stroke width utilities to control the thickness of text outlines.

Syntax

.stroke-width-[value]

Where [value] can be a spacing-based scale or fixed pixel value.

.stroke-[color-name]

Where [color-name] refers to any available color defined in your design system (e.g., red, blue-500, black-950, etc.).

Examples

<div class="bold fs-3xl color-grey stroke-red stroke-width-1">Red strokes</div>

<div class="bold fs-6xl color-grey stroke-blue stroke-width-3">Big strokes</div>

Available Stroke Widths

Spacing-Based Widths

These values use your framework’s spacing scale:

Pixel-Based Widths

For exact control using fixed units:

These utilities apply diagonal striped backgrounds using a repeating linear gradient. They support light and dark mode theming.

Usage

Apply classes prefixed with optional mode prefixes to add striped backgrounds:

• .stripes-[color] — Stripes background
• .light:stripes-[color] — Stripes background applied in light mode only
• .dark:stripes-[color] — Stripes background applied in dark mode only
• .stripes-bg-[color]-[shade] — Specify the background color and shade
• .stripes-fg-[color]-[shade] — Specify the foreground color and shade
• .light:stripes-bg-[color] — Applies the background stripe color only in light mode
• .dark:stripes-bg-[color] — Applies the background stripe color only in dark mode
• .light:stripes-fg-[color] — Applies the foreground (stripe line) color only in light mode
• .dark:stripes-fg-[color] — Applies the foreground (stripe line) color only in dark mode

Examples

<div class="stripes-red">
  Striped background with default colors.
</div>

<div class="dark:stripes-blue light:stripes-orange">
  Orange stripes in light mode and blue stripes in dark mode
</div>

<div class="stripes-bg-yellow stripes-fg-purple-500">
  Orange and purple stripes
</div>

Color list

Shades

Each color includes 11 shade levels, ranging from the lightest (-50) to the darkest (-950). Use these to fine-tune the text color of elements.

Red Shade Examples

Use hatching utility classes to apply a diagonal striped pattern using a single color across light and dark modes. This pattern uses a 135deg repeating-linear-gradient.

Class Patterns

Examples

<div class="hatching-orange">
  Diagonal orange hatch pattern
</div>

<div class="light:hatching-red-200 dark:hatching-blue-700">
  Diagonal hatch pattern for adaptive theming
</div>

<div class="bg-red-800 hatching-orange-500">
  Combine hatching and background color
</div>

Usage Notes

• The background pattern is diagonal and sized at 10px x 10px
• Uses --hatching-light and --hatching-dark CSS variables under the hood
• Can be combined for adaptive themes, e.g. use different colors per mode

Color list

Shades

Each color includes 11 shade levels, ranging from the lightest (-50) to the darkest (-950). Use these to fine-tune the text color of elements.

Red Shade Examples

Add a subtle dotted pattern to any element using theme-aware utility classes. Dots are rendered using radial-gradient and spaced every 10×10px.

Class Reference

Examples

<div class="dotted-pink">
  Pink dots
</div>

<div class="dotted-green-300">
  Dots with green-300
</div>

<div class="light:dotted-pink-200 dark:dotted-blue-700">
  Theme-responsive dotted background
</div>

<div class=" bg-red-800 dotted-orange-500">
  Combine background and dotted grid
</div>

Color list

Shades

Each color includes 11 shade levels, ranging from the lightest (-50) to the darkest (-950). Use these to fine-tune the text color of elements.

Red Shade Examples

Use .ratio-[width]x[height] utility classes to control the aspect ratio of an element. These classes apply the aspect-ratio CSS property to enforce consistent width-to-height proportions.

Syntax

.ratio-[width]x[height]

This sets:

aspect-ratio: [width] / [height] !important;

Examples

<div class="mt-4 w-128px ratio-1x1 bg-blue border rounded">1:1</div>

<div class="mt-4 w-128px ratio-16x9 bg-blue border rounded">16:9</div>

Available Ratios

Notes

• You can apply these classes to any block-level or flex/grid item.
• Useful for embedding videos, images, cards, or any container where aspect consistency is required.
• Combine with width utilities (w-100, w-50, etc.) to define how much horizontal space the element should take.

Use the .greyscale-[value] utilities to apply a grayscale filter to an element. This is useful for desaturating images, icons, or backgrounds for stylistic or accessibility purposes.

Syntax

.greyscale-[value]

This sets:

filter: grayscale([value]);

You can also apply these effects on hover using:

.hover:greyscale-[value]

Which sets the filter on hover only.

Example

<img class="greyscale-50 hover:greyscale-0" src="image.jpg">

This example shows a fully grayscale image that returns to color on hover.

Available Classes

Hover Variants

Notes

• Grayscale filters work on any element, but are most commonly used on images and backgrounds.
• For hover effects to be smooth, combine with .transition and .duration-* utilities.

The color palette is built using the OKLCH CSS color space, which enables precise perceptual control over lightness, contrast, and visual harmony. It includes a wide range of tones organized into tonal columns from 50 to 950, making it ideal for building clear visual hierarchies, UI systems, branding, and editorial design.

Usage

[color-scheme]:[state]:[target]-[name]-[shade]

• [color-scheme] – Applies the color in light: or dark: mode (optional)
• [state] – Applies the color on specific states (e.g., hover:bg-purple-600) (optional)
• [target] – Element targeted (e.g., bg, text, border, etc.)
• [name] – Base color name (e.g., yellow, orange, blue, etc.)
• [shade] – Specific tone in the color scale (e.g., 50, 100, 200, …, 950)