@prezly/themes-ui-components v0.9.0

UI Components library for Prezly Themes

This library provides some basic components intended to be used with Prezly Themes.

Adding the library to your Next.js theme

npm

npm install --save @prezly/themes-ui-components

peerDependencies

This library is intended to be used with Next.js applications, so it requires next, react and react-dom to work. These should already be installed if you have an existing Next.js app. If you're starting from scratch, use create-next-app to quick-start the project.

To keep things fresh, we require at least Next.js 12 and React 17.

The library also expects your project to have the Prezly Theme Kit and React Intl libraries installed. These are basic dependencies for every Prezly theme.

You can install the dependencies manually

npm install --save next react react-dom @prezly/theme-kit-nextjs react-intl
npm install --save-dev @types/react @types/react-dom

Styles

In order for the UI components to display properly, you'll need to import the library stylesheets into your app. This allows for greater control over the order of you styles, since the UI library have the lowest specificity possible to make customizing the components easier.

You can import the stylesheet in you /pages/_app.tsx:

import '@prezly/themes-ui-components/styles.css';

Or import them directly in your stylesheets:

@import '~@prezly/themes-ui-components/styles.css';

What's next

You can learn more on how about Prezly's themes by checking these repos:

• Prezly Starter Theme - this is a bare-bones application created to demonstrate how to display the fetched content and recommended page structure
• Prezly Bea Theme - this is our new fully-fledged theme available to all Prezly customers. It has lots of stuff on top, both in styling and in data logic.

Brought to you by Prezly.