Documentation

PrimeBlocks for React consists of copy paste ready UI blocks crafted with PrimeFlex where theming and interactivity is provided by PrimeReact.

Compatibility

PrimeBlocks library requires PrimeReact v9.3+ and PrimeFlex v3.3.0+.

What is a Block?

A UI block is a set of html elements styled with the PrimeFlex CSS utility library. A block can also contain PrimeReact components in addition to regular elements. The blocks are designed to be used easily by simply moving the block code to your own application. This is achieved by defining the styling in the markup without using a custom css declaration. In cases where a block requires interactivity such as toggling the visibility of a menu or a sidebar, StyleClass component of PrimeReact manages the events and animations.

Theming

Blocks utilize color classes for background, text color, border color and pseudo states. Color values are derived from the PrimeReact theme being used so that a block can seamlesslly integrate with your application. For examplebg-blue-500 class retrieves the background color using the --blue-500 CSS variables from PrimeReact. See PrimeReact colors palettes for more information.

Setup

PrimeFlex

PrimeFlex v3.3+ needs to be installed to begin with.

npm install primeflex --save
 

Next step is adding the primeflex.css at pages/_app.js file.

import "primeflex/primeflex.css";
 

StyleClass Component

Many of the blocks like a navbar may require interactivity for opening or hiding a menu. A handy component called StyleClass is available via PrimeReact to bring interactivity easily. The Component adds a click event to its host and manages the enter/leave animation of a target. Import the StyleClass component from PrimeReact to your component.

import { StyleClass } from 'primereact/styleclass';
 

Font Settings

PrimeBlocks use the font derived from the PrimeReact theme being used, you may still use them with a font of your choice however to have the same look when a block is copied to your own page, add the config below to your application.

body {
    font-family: var(--font-family);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
 

Run the Samples

PrimeBlocks demo application is distributed as a Next.JS project, download the file from PrimeStore, extract the contents of the zip file and execute the following commands to run the application at http://localhost:3000. Note that Next.JS is only used for demo purposes, PrimeBlocks can be used in any React environment like Remix as well.

npm install
npm run dev
 

Try a Block

That‘s it, now you can use the copy icon of a block demo and paste it to your application to get started. Please note that, a block may use PrimeReact components as well so make sure those components are imported.

Production Size

When using a utility CSS library like PrimeFlex, it is likely to use only a set of classes from the library leaving the rest of the library as unused. To avoid including the unused part in your application, it is strongly recommended to use a tool like PurgeCSS that analyzes your code and generates an optimized primeflex file that only contains the utilities you‘ve used.