open-index/open-npm huggingface dataset:
npm package: @paradigmai/playtune-auth
Description: PlayTune Authentication SDK
Author: Paradigm AI
Latest version: 1.1.7

This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).

## Getting Started

First, run the development server:

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.

This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.

## Learn More

To learn more about Next.js, take a look at the following resources:

- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.

You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!

## Deploy on Vercel

The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.

Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
npm package: @paradigmjs/nine
Description: React library to create 9-slice image surfaces
Author: Sam Craig
Latest version: 0.0.15

# [Neptune](http://neptune.lunaris.io/) 9-Slice Component

Neptune is a React UI toolkit for the web.

This package provides a React component to generate completely dynamic [9-slice](http://rwillustrator.blogspot.com/2007/04/understanding-9-slice-scaling.html) surfaces.

## Installation

```
npm install --save @paradigmjs/nine
```

## Example

```js
import * as React from "react";
import { default as Nine } from "@paradigmjs/nine";

class MyComponent extends React.Component {
	render() {
		return (
			<Nine width={256} height={256} corner={85} image="/images/myImage.png">
				HELLO WORLD!
			</NineSlicNinee>
		);
	}
}
```

### [9-Slice Documentation](http://neptune.lunaris.io/docs/#table) | [Full Documentation](http://neptune.lunaris.io/docs) | [Source Code](https://github.com/lunaris-studios/neptune)
npm package: @paradise-cloud/easy-debrid
Description: Easy Debrid Client
Latest version: 3.0.0

# Easy Debrid Client

[![Build](https://github.com/Paradise-Cloud/easy-debrid-client/actions/workflows/build.yaml/badge.svg?branch=main)](https://github.com/Paradise-Cloud/easy-debrid-client/actions/workflows/build.yaml)

Connect, Manage and Download from Easy Debrid API
npm package: @paradise-ui/alert
Description: A component to display contextual messages such as information, success, warning and error messages
Author: Muhammad Syakirurohman
Latest version: 1.0.0-beta.2

# @paradise-ui/alert

A component to display contextual messages such as information, success, warning and error messages

## Installation

Every Paradise UI component is designed to be able to run as a standalone component. So, you can just install them by running this command

```sh
yarn add @paradise-ui/alert
# or
npm i @paradise-ui/alert
# or
pnpm i @paradise-ui/alert
```

## Usage

```tsx
import { Alert } from '@paradise-ui/alert'
import '@package-ui/alert/style'

const ParentComponent = () => {
  return <Alert>Lorem ipsum dolor sit amet</Alert>
}
```

If you install the <a href="https://npmjs.com/package/@paradise-ui/react">whole paradise UI package</a>, you dont have to import the style, but you have to wrap the component inside `ParadiseUIProvider`

## Demo

Checkout <a href="https://storybook.paradise-ui.com/?path=/docs/component-feedback-alert--docs" target="_blank">our storybook</a> for demo and more use cases.


## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/devaradise/paradise-ui/blob/main/LICENSE).
npm package: @paradise-ui/button
Description: Button component with enhanced functionality
Author: Muhammad Syakirurohman
Latest version: 1.0.0-beta.2

# @paradise-ui/button

A custom button component with extended functionality based on native `button` or `a` element.

## Installation

Every Paradise UI component is designed to be able to run as a standalone component. So, you can just install them by running this command

```sh
yarn add @paradise-ui/button
# or
npm i @paradise-ui/button
# or
pnpm i @paradise-ui/button
```

## Usage

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

const ParentComponent = () => {
  return <Button>Lorem ipsum</Button>
}
```

If you install the <a href="https://npmjs.com/package/@paradise-ui/react">whole paradise UI package</a>, you dont have to import the style, but you have to wrap the component inside `ParadiseUIProvider`

## Demo

Checkout <a href="https://storybook.paradise-ui.com/?path=/docs/component-form-button--docs" target="_blank">our storybook</a> for demo and more use cases.

## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/devaradise/paradise-ui/blob/main/LICENSE).
npm package: @paradise-ui/text-area
Description: A custom component that enhance native textarea element
Author: Muhammad Syakirurohman
Latest version: 1.0.0-beta.1

# @paradise-ui/text-area

A custom component that enhance native textarea element


## Installation

```sh
yarn add @paradise-ui/text-area
# or
npm i @paradise-ui/text-area
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/devaradise/paradise-ui/blob/master/CONTRIBUTING.md)
for details.

## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/devaradise/paradise-ui/blob/master/LICENSE).
npm package: @paradise-ui/text-field
Description: An enhanced version of common &lt;input&gt; component
Author: Muhammad Syakirurohman
Latest version: 1.1.0-beta.3

# @paradise-ui/text-field

An enhanced version of common &lt;input&gt; component for React

## Installation

Every Paradise UI component is designed to be able to run as a standalone component. So, you can just install them by running this command

```sh
yarn add @paradise-ui/text-field
# or
npm i @paradise-ui/text-field
# or
pnpm i @paradise-ui/text-field
```

## Import

```jsx
import { TextField } from '@paradise-ui/text-field'
import '@package-ui/text-field/style'

const ParentComponent = () => {
  return <TextField>Lorem ipsum</TextField>
}
```

If you install the <a href="https://npmjs.com/package/@paradise-ui/react">whole paradise UI package</a>, you dont have to import the style, but you have to wrap the component inside `ParadiseUIProvider`

## Demo

Checkout <a href="https://storybook.paradise-ui.com/?path=/docs/component-form-text-field--docs" target="_blank">our storybook</a> for demo and more use cases.

## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/devaradise/paradise-ui/blob/main/LICENSE).
npm package: @paradise-ui/toast
Description: A component to show message / notification after users took an action
Author: Muhammad Syakirurohman
Latest version: 1.0.0-beta.2

# @paradise-ui/toast

A component to show message / notification after users took an action

## Installation

Every Paradise UI component is designed to be able to run as a standalone component. So, you can just install them by running this command

```sh
yarn add @paradise-ui/toast
# or
npm i @paradise-ui/toast
# or
pnpm i @paradise-ui/toast
```

## Usage

Before you can use toast component, you need to import `ToastProvider` and wrap your app component with it.

```jsx
import { ToastProvider } from '@paradise-ui/toast'
import '@package-ui/toast/style'

function AppRoot({ children }) {
  return <ToastProvider>{ children }</ToastProvider>
}
```

If you install the <a href="https://npmjs.com/package/@paradise-ui/react">whole paradise UI package</a> and use `ParadiseUIProvider`, you dont have to import the style and `ToastProvider` again.

Now, you can use the toast component by calling `useToast` hook.

```jsx
export const PageComponent = () => {
  const toast = useToast();
  return <Button onClick={() => toast.add({ description: 'This is a an example' })}>Trigger a toast</Button>;
};

```

## Demo

Checkout <a href="https://storybook.paradise-ui.com/?path=/docs/component-feedback-toast--docs" target="_blank">our storybook</a> for demo and more use cases.

## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/devaradise/paradise-ui/blob/main/LICENSE).