Getting Started

Install Anon UI and start building beautiful interfaces in minutes.

CDN Installation

The quickest way to get started. Simply add the CDN link to your HTML.

HTML

<link rel="stylesheet" href="https://unpkg.com/anon_ui/dist/anon_ui.css">

NPM Installation

For production projects, install via NPM for better version control.

BASH

npm install anon_ui

After installation, import the CSS file in your project:

import 'anon_ui/dist/anon_ui.css';

Quick Start Example

Here's a simple example to get you started.

HTML

<div class="flex justify-center items-center bg-accent p-6 rounded-lg">
    <h1 class="text-2xl bold">Hello, Anon UI!</h1>
    </div>

SPACING

Padding

Utilities for controlling an element's padding.

Class

px-number
py-number
pt-number
pb-number
pl-number
pr-number
p-0
p-1
p-2
p-3
p-4
p-5
p-6
p-7
p-8
p-9
p-10
p-11
p-12
p-13
p-14
p-15
p-16
p-17
p-18
p-19
p-20

Styles

padding-left,-right: var(--space-number);
padding-top,-bottom: var(--space-number);
padding-top: var(--space-number);
padding-bottom: var(--space-number);
padding-left: var(--space-number);
padding-right: var(--space-number);
padding: 0;
padding: var(--space-1); /* 0.25rem(4px) */
padding: var(--space-2); /* 0.5rem(8px) */
padding: var(--space-3); /* 0.75rem(12px) */
padding: var(--space-4); /* 1rem(16px) */
padding: var(--space-5); /* 1.25rem(20px) */
padding: var(--space-6); /* 1.5rem(24px) */
padding: var(--space-7); /* 1.75rem(28px) */
padding: var(--space-8); /* 2rem(32px) */
padding: var(--space-9); /* 2.25rem(36px) */
padding: var(--space-10); /* 2.5rem(40px) */
padding: var(--space-11); /* 2.75rem(44px) */
padding: var(--space-12); /* 3rem(48px) */
padding: var(--space-13); /* 3.25rem(52px) */
padding: var(--space-14); /* 3.5rem(56px) */
padding: var(--space-15); /* 3.75rem(60px) */
padding: var(--space-16); /* 4rem(64px) */
padding: var(--space-17); /* 4.25rem(68px) */
padding: var(--space-18); /* 4.5rem(72px) */
padding: var(--space-19); /* 4.75rem(76px) */
padding: var(--space-20); /* 5rem(80px) */

SPACING

Margin

Utilities for controlling an element's margin.

Class

mx-number
my-number
mt-number
mb-number
ml-number
mr-number
m-0
m-1
m-2
m-3
m-4
m-5
m-6
m-7
m-8
m-9
m-10
m-11
m-12
m-13
m-14
m-15
m-16
m-17
m-18
m-19
m-20

Styles

margin-left,-right: var(--space-number);
margin-top,-bottom: var(--space-number);
margin-top: var(--space-number);
margin-bottom: var(--space-number);
margin-left: var(--space-number);
margin-right: var(--space-number);
margin: 0;
margin: var(--space-1); /* 0.25rem(4px) */
margin: var(--space-2); /* 0.5rem(8px) */
margin: var(--space-3); /* 0.75rem(12px) */
margin: var(--space-4); /* 1rem(16px) */
margin: var(--space-5); /* 1.25rem(20px) */
margin: var(--space-6); /* 1.5rem(24px) */
margin: var(--space-7); /* 1.75rem(28px) */
margin: var(--space-8); /* 2rem(32px) */
margin: var(--space-9); /* 2.25rem(36px) */
margin: var(--space-10); /* 2.5rem(40px) */
margin: var(--space-11); /* 2.75rem(44px) */
margin: var(--space-12); /* 3rem(48px) */
margin: var(--space-13); /* 3.25rem(52px) */
margin: var(--space-14); /* 3.5rem(56px) */
margin: var(--space-15); /* 3.75rem(60px) */
margin: var(--space-16); /* 4rem(64px) */
margin: var(--space-17); /* 4.25rem(68px) */
margin: var(--space-18); /* 4.5rem(72px) */
margin: var(--space-19); /* 4.75rem(76px) */
margin: var(--space-20); /* 5rem(80px) */

BACKGROUNDS

Background-Clip

Utilities for controlling the bounding box of an element background.

Classes

bg-clip-border
bg-clip-content
bg-clip-padding
bg-clip-text

Styles

background-clip: border-box;
background-clip: content-box;
background-clip: padding-box;
background-clip: text;

BACKGROUNDS

Background-Position

Utilities for controlling the position of an element's background image.

Classes

bg-top
bg-top-left
bg-top-right
bg-right
bg-center
bg-left
bg-bottom
bg-bottom-right
bg-bottom-left

Styles

background-position: top;
background-position: top left;
background-position: top right;
background-position: right;
background-position: center;
background-position: left;
background-position: bottom;
background-position: bottom right;
background-position: bottom left;

BACKGROUNDS

Background-Repeat

Utilities for controlling the repition of an element's background image.

Classes

bg-repeat
bg-repeat-x
bg-repeat-y
bg-repeat-no
bg-repeat-space
bg-repeat-round

Styles

background-repeat: repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: no-repeat;
background-repeat: space;
background-repeat: round;

BACKGROUNDS

Background-Size

Utilities for controlling the background-size of an element's background image.

Classes

bg-auto
bg-cover
bg-contain

Styles

background-size: auto;
background-size: cover;
background-size: contain;

BACKGROUNDS

Background-Origin

Utilities for controlling how an element's background is positioned relative to borders, padding, and content.

Classes

bg-origin-border
bg-origin-content
bg-origin-padding

Styles

background-origin: border-box;
background-origin: content-box;
background-origin: padding-box;

BACKGROUNDS

Background-Attachment

Utilities for controlling how an element's background image behaves when scrolling.

Classes

bg-fixed
bg-local
bg-scroll

Styles

background-attachment: fixed;
background-attachment: local;
background-attachment: scroll;

BACKGROUNDS

Background-Color

Utilities for controlling how an element's background color.

Classes

bg-inherit
bg-transparent
bg-black
bg-white
bg-primary
bg-secondary
bg-tertiary
bg-accent
bg-neutral
bg-success
bg-warning
bg-primary-50
bg-primary-100
bg-primary-200
bg-primary-300
bg-primary-400
bg-primary-500
bg-primary-600
bg-primary-700
bg-primary-800
bg-primary-900
bg-secondary-50
bg-secondary-100
bg-secondary-200
bg-secondary-300
bg-secondary-400
bg-secondary-500
bg-secondary-600
bg-secondary-700
bg-secondary-800
bg-secondary-900
bg-accent-50
bg-accent-100
bg-accent-200
bg-accent-300
bg-accent-400
bg-accent-500
bg-accent-600
bg-accent-700
bg-accent-800
bg-accent-900
bg-neutral-50
bg-neutral-100
bg-neutral-200
bg-neutral-300
bg-neutral-400
bg-neutral-500
bg-neutral-600
bg-neutral-700
bg-neutral-800
bg-neutral-900

Styles

background-color: inherit;
background-color: transparent;
background-color: black;
background-color: white;
background-color: var(--primary);
background-color: var(--secondary);
background-color: var(--tertiary);
background-color: var(--accent);
background-color: var(--neutral);
background-color: var(--success);
background-color: var(--warning);
background-color: var(--primary-50);
background-color: var(--primary-100);
background-color: var(--primary-200);
background-color: var(--primary-300);
background-color: var(--primary-400);
background-color: var(--primary-500);
background-color: var(--primary-600);
background-color: var(--primary-700);
background-color: var(--primary-800);
background-color: var(--primary-900);
background-color: var(--secondary-50);
background-color: var(--secondary-100);
background-color: var(--secondary-200);
background-color: var(--secondary-300);
background-color: var(--secondary-400);
background-color: var(--secondary-500);
background-color: var(--secondary-600);
background-color: var(--secondary-700);
background-color: var(--secondary-800);
background-color: var(--secondary-900);
background-color: var(--accent-50);
background-color: var(--accent-100);
background-color: var(--accent-200);
background-color: var(--accent-300);
background-color: var(--accent-400);
background-color: var(--accent-500);
background-color: var(--accent-600);
background-color: var(--accent-700);
background-color: var(--accent-800);
background-color: var(--accent-900);
background-color: var(--neutral-50);
background-color: var(--neutral-100);
background-color: var(--neutral-200);
background-color: var(--neutral-300);
background-color: var(--neutral-400);
background-color: var(--neutral-500);
background-color: var(--neutral-600);
background-color: var(--neutral-700);
background-color: var(--neutral-800);
background-color: var(--neutral-900);

BORDER

Border-Color

Utilities for controlling an element's border color.

Classes

border-inherit
border-primary
border-secondary
border-tertiary
border-accent

Styles

border-color: inherit;
border-color: var(--bg-primary);
border-color: var(--bg-secondary);
border-color: var(--bg-tertiary);
border-color: var(--bg-accent);

BORDER

Border-Width

Utilities for controlling an element's border width.

Classes

border
border-1
border-2
border-3
border-4
border-5
border-6
border-7
border-8
border-top
border-top-1
border-top-2
border-top-3
border-top-4
border-top-5
border-top-6
border-top-7
border-top-8
border-bottom
border-bottom-1
border-bottom-2
border-bottom-3
border-bottom-4
border-bottom-5
border-bottom-6
border-bottom-7
border-bottom-8
border-right
border-right-1
border-right-2
border-right-3
border-right-4
border-right-5
border-right-6
border-right-7
border-right-8
border-left
border-left-1
border-left-2
border-left-3
border-left-4
border-left-5
border-left-6
border-left-7
border-left-8

Styles

border-width: 1px; border-style: solid;
border-width: var(--space-1);
border-width: var(--space-2);
border-width: var(--space-3);
border-width: var(--space-4);
border-width: var(--space-5);
border-width: var(--space-6);
border-width: var(--space-7);
border-width: var(--space-8);
border-top-width: 1px; border-top-style: solid;
border-top-width: var(--space-1);
border-top-width: var(--space-2);
border-top-width: var(--space-3);
border-top-width: var(--space-4);
border-top-width: var(--space-5);
border-top-width: var(--space-6);
border-top-width: var(--space-7);
border-top-width: var(--space-8);
border-bottom-width: 1px; border-bottom-style: solid;
border-bottom-width: var(--space-1);
border-bottom-width: var(--space-2);
border-bottom-width: var(--space-3);
border-bottom-width: var(--space-4);
border-bottom-width: var(--space-5);
border-bottom-width: var(--space-6);
border-bottom-width: var(--space-7);
border-bottom-width: var(--space-8);
border-right-width: 1px; border-right-style: solid;
border-right-width: var(--space-1);
border-right-width: var(--space-2);
border-right-width: var(--space-3);
border-right-width: var(--space-4);
border-right-width: var(--space-5);
border-right-width: var(--space-6);
border-right-width: var(--space-7);
border-right-width: var(--space-8);
border-left-width: 1px; border-left-style: solid;
border-left-width: var(--space-1);
border-left-width: var(--space-2);
border-left-width: var(--space-3);
border-left-width: var(--space-4);
border-left-width: var(--space-5);
border-left-width: var(--space-6);
border-left-width: var(--space-7);
border-left-width: var(--space-8);

BORDER

Border-Style

Utilities for controlling an element's border style.

Classes

border
border-solid
border-dotted
border-double
border-dashed
border-none
border-hidden
border-ridge
border-inset
border-top
border-top-solid
border-top-dotted
border-top-double
border-top-dashed
border-top-none
border-top-hidden
border-top-ridge
border-top-inset
border-bottom
border-bottom-solid
border-bottom-dotted
border-bottom-double
border-bottom-dashed
border-bottom-none
border-bottom-hidden
border-bottom-ridge
border-bottom-inset
border-right
border-right-solid
border-right-dotted
border-right-double
border-right-dashed
border-right-none
border-right-hidden
border-right-ridge
border-right-inset
border-left
border-left-solid
border-left-dotted
border-left-double
border-left-dashed
border-left-none
border-left-hidden
border-left-ridge
border-left-inset

Styles

border-width: 1px; border-style: solid;
border-style: solid;
border-style: dotted;
border-style: double;
border-style: dashed;
border-style: none;
border-style: hidden;
border-style: ridge;
border-style: inset;
border-top-width: 1px; border-top-style: solid;
border-top-style: solid;
border--top-style: dotted;
border-top-style: double;
border-top-style: dashed;
border-top-style: none;
border-top-style: hidden;
border-top-style: ridge;
border-top-style: inset;
border-bottom-width: 1px; border-bottom-style: solid;
border-bottom-style: solid;
border-bottom-style: dotted;
border-bottom-style: double;
border-bottom-style: dashed;
border-bottom-style: none;
border-bottom-style: hidden;
border-bottom-style: ridge;
border-bottom-style: inset;
border-right-width: 1px; border-style: solid;
border-right-style: solid;
border-right-style: dotted;
border-right-style: double;
border-right-style: dashed;
border-right-style: none;
border-right-style: hidden;
border-right-style: ridge;
border-right-style: inset;
border-left-width: 1px; borderleft--style: solid;
border-left-style: solid;
border-left-style: dotted;
border-left-style: double;
border-left-style: dashed;
border-left-style: none;
border-left-style: hidden;
border-left-style: ridge;
border-left-style: inset;