# @prezly/themes-ui-components

> A collection of UI components for Prezly Themes

Latest version **0.9.0** (published 2023-01-13) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @prezly/themes-ui-components
pnpm add @prezly/themes-ui-components
yarn add @prezly/themes-ui-components
bun add @prezly/themes-ui-components
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.9.0 |
| Published | 2023-01-13 |
| First published | 2022-06-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >= 14.x |
| Dependencies | 3 |
| Unpacked size | 1.2 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Prezly Team |
| Maintainers | mohammadxali, francis-prezly, zourdyzou, oskar-prezly, pestaa, aspirisen, kudlik, digitalbase, e1npm, satoav, makanda |

## Links

- npm: https://www.npmjs.com/package/@prezly/themes-ui-components
- Repository: https://github.com/prezly/themes-ui-components
- Homepage: https://github.com/prezly/themes-ui-components#readme
- Issues: https://github.com/prezly/themes-ui-components/issues
- npm.io page: https://npm.io/package/@prezly/themes-ui-components

## Dependencies (3)

- [classnames](https://npm.io/package/classnames.md) ^2.3.1
- [@prezly/icons](https://npm.io/package/@prezly/icons.md) ^0.3.1
- [@headlessui/react](https://npm.io/package/@headlessui/react.md) ^1.6.4

## Recent versions

- 0.9.0 (latest) — 2023-01-13
- 0.9.0-1 (preview) — 2023-01-13
- 0.9.0-0 — 2023-01-13
- 0.8.2 — 2022-12-14
- 0.8.1 — 2022-12-08
- 0.8.0 — 2022-12-08
- 0.8.0-2 — 2022-11-21
- 0.8.0-1 — 2022-11-21
- 0.8.0-0 — 2022-11-21
- 0.7.1 — 2022-10-14
- 0.7.0 — 2022-08-11
- 0.6.1 — 2022-07-29
- 0.6.0 — 2022-07-22
- 0.6.0-1 — 2022-07-22
- 0.6.0-0 — 2022-07-22
- … 31 more at https://npm.io/package/@prezly/themes-ui-components/versions

## README

# UI Components library for Prezly Themes

![Version](https://img.shields.io/npm/v/@prezly/themes-ui-components)
![License](https://img.shields.io/npm/l/@prezly/themes-ui-components)

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

## Adding the library to your Next.js theme

### npm

```Shell
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
```Shell
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`:
```ts
import '@prezly/themes-ui-components/styles.css';
```

Or import them directly in your stylesheets:
```css
@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](https://github.com/prezly/theme-nextjs-starter) - this is a bare-bones application created to demonstrate how to display the fetched content and recommended page structure
- [Prezly Bea Theme](https://github.com/prezly/theme-nextjs-bea) - 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](https://www.prezly.com/?utm_source=github&utm_campaign=@prezly/themes-ui-components).

[create-next-app]: https://nextjs.org/docs/api-reference/create-next-app
[Next.js]: https://nextjs.org
[Prezly Theme Kit]: https://github.com/prezly/themes-ui-components
[React Intl]: https://formatjs.io/docs/react-intl/

---
_Source: https://npm.io/package/@prezly/themes-ui-components · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._