Perfect CSS Utility Companion

PrimeFlex is a lightweight responsive CSS utility library to accompany Prime UI libraries and static webpages as well.

Get Started
npm i primeflex
border-1 surface-border flex gap-2
flex w-full gap-2 p-4
Landing Profile
flex w-full gap-2 flex-column p-4

Jane JOSHUA

Freelance UI/UX Designer

Follow
User
User
User
User
User
User
User
User
User
User
User
User
User
User
User
User
User
User
User
User
User
User
User
User
User
User
User

Empowering Web Design

Unlock consistency and flexibility in your designs with our collection of pre-built components and utility classes, designed to work seamlessly across all screen sizes.

Learn More
orange-400
orange-500
orange-600
yellow-400
yellow-500
yellow-600
yellow-700
yellow-800
green-300
green-400
WCAG
green-500
green-600
green-700
teal-300
teal-400
COMPATIBLE
teal-500
teal-600
cyan-300
cyan-400
COLOR
PALETTE
cyan-500
cyan-600
blue-300
blue-400
blue-500
blue-600
blue-700
blue-800
indigo-300
indigo-400
indigo-500
indigo-600
indigo-700
indigo-800
purple-300
purple-400
purple-500
purple-600
purple-700
purple-800
w-undefined
w-undefined
w-undefined
w-undefined
1
LAYOUT UTILITIES
1
w-undefined
w-undefined
w-undefined
w-undefined
ShadowElevation
Typography Properties
LightWeightBold
xsSize8xl
fadeindown
fadeinup
scalein
zoomindown

Animation

Bring your design to life with PrimeFlex's effortless animation classes. Implement dynamic, engaging visuals with ease, adding an extra layer of interactivity to your creations.

Learn more

Create Your Style

Craft unique aesthetics with PrimeFlex's classes. Use our flexible toolkit to make your design vision a reality, embodying your brand's distinct style.

Learn more
Glassmorphic
Fancy
Modern
Basic
Prime Coffee Shop
 

Adaptive
for Every Screen

PrimeFlex guarantees optimal adaptability. Enjoy seamless display and functionality on every screen size, ensuring universal access to your projects.

Learn more
Mobile nullpx

Made with PrimeFlex

Leverage PrimeBlocks, the building blocks crafted with PrimeFlex. Streamline your project and concentrate on core functionalities, leaving the aesthetics to us.

ec-9
ec-2
ec-16
ec-10
app-7
app-10
9
28
22
19
12
ec-9
ec-2
ec-16
ec-10
app-7
app-10
9
28
22
19
12
ec-9
ec-2
ec-16
ec-10
app-7
app-10
9
28
22
19
12
ec-8
ec-18
ec-15
ec-11
app-8
app-11
app-1
4
23
2
17
13
10
ec-8
ec-18
ec-15
ec-11
app-8
app-11
app-1
4
23
2
17
13
10
ec-8
ec-18
ec-15
ec-11
app-8
app-11
app-1
4
23
2
17
13
10
ec-7
ec-17
app-9
app-5
app-3
5
25
18
16
1
ec-7
ec-17
app-9
app-5
app-3
5
25
18
16
1
ec-7
ec-17
app-9
app-5
app-3
5
25
18
16
1
ec-6
ec-3
ec-13
14
11
8
3
21
15
ec-6
ec-3
ec-13
14
11
8
3
21
15
ec-6
ec-3
ec-13
14
11
8
3
21
15
ec-5
ec-4
ec-14
ec-12
ec-1
app-2
7
27
20
ec-5
ec-4
ec-14
ec-12
ec-1
app-2
7
27
20
ec-5
ec-4
ec-14
ec-12
ec-1
app-2
7
27
20
ec-9
ec-2
ec-16
ec-10
app-7
app-10
9
28
22
19
12
ec-9
ec-2
ec-16
ec-10
app-7
app-10
9
28
22
19
12
ec-9
ec-2
ec-16
ec-10
app-7
app-10
9
28
22
19
12
ec-8
ec-18
ec-15
ec-11
app-8
app-11
app-1
4
23
2
17
13
10
ec-8
ec-18
ec-15
ec-11
app-8
app-11
app-1
4
23
2
17
13
10
ec-8
ec-18
ec-15
ec-11
app-8
app-11
app-1
4
23
2
17
13
10
ec-7
ec-17
app-9
app-5
app-3
5
25
18
16
1
ec-7
ec-17
app-9
app-5
app-3
5
25
18
16
1
ec-7
ec-17
app-9
app-5
app-3
5
25
18
16
1