Paradise UI

Modular & Highly Customizable React UI Component Library

Paradise UI is a collection of React UI components that designed to be:

• Simple & Easy to use
• Highly customizable through component props, hooks, and documented HTML skeleton.
• Headless. The component can be 100% unstyled, and you can apply your own css style.
• Modular. Each component can be installed independently.

Paradise UI does not aim to be another React UI library with an opinionated design system. We focus to build components that can be used and match with any design system or to be used as a base to build a design system.

Checkout Paradise UI storybook to see the complete list and demo of our components

Installation

There are 2 ways to install Paradise UI components to your React project.

Install the whole Paradise UI package

It is recommended to install the whole package of Paradise UI if you're going to use multiple components and paradise UI theming.

# yarn
yarn add @paradise-ui/react

# or npm
npm install @paradise-ui/react

# or pnpm
pnpm install @paradise-ui/react

Install standalone component

If you only want to install one or a few components, for a case such as when you already use another UI library, you can install the component individually. It will only install that particular component package.

Suppose you want to add our Text field component into your existing project.

# yarn
yarn add @paradise-ui/text-field

# or npm
npm i @paradise-ui/text-field

# or pnpm
pnpm add @paradise-ui/text-field

Component Package List

This is the list of our components so far. More components are in progress.

• Alert
• Button
• Text field
• Toast

Usage

Using Paradise UI Provider

If you are going to use Paradise UI exclusively as your project component library, you need to wrap your application with ParadiseUIProvider.

import { ParadiseUIProvider } from '@paradise-ui/react'

// Wrap your root application component (usually in App.jsx) with ParadiseUIProvider
function App({ children }) {
  return <ParadiseUIProvider>{children}</ParadiseUIProvider>
}
export default App

ParadiseUIProvider accept colors as a prop. You can also use useThemeMode hook in any component inside ParadiseUIProvider to control dark mode. Check the docs & demo here for more details about its usage.

Now, you can use any Paradise UI component in your project.

import { Button } from '@paradise-ui/react'

function PageComponent() {
  return <Button variant='solid'>ParadiseUI Button</Button>
}
export default PageComponent

Standalone Component Usage

For standalone component usage, you just need to import the component directly from its package. You dont need to wrap your application with ParadiseUIProvider.

However, you need to import component style explicitly. Every ParadiseUI component is headless (a.k.a unstyled) by default.

import { Button } from '@paradise-ui/button'
import '@paradise-ui/button/style'

function PageComponent() {
  return <Button variant='solid'>ParadiseUI Button</Button>
}
export default PageComponent

Licence

MIT © Muhammad Syakirurohman