open-index/open-npm huggingface dataset:
npm package: @react-ck/accordion
Description: > :warning: **WARNING**: This component library is being updated frequently and it's currently unstable due to being in it's early stages, we advice you to use only in production environments only after version **2.0.0**.
Latest version: 2.0.0

# React CK | Accordion Component

> :warning: **WARNING**: This component library is being updated frequently and it's currently unstable due to being in it's early stages, we advice you to use only in production environments only after version **2.0.0**.

The Accordion component is a dynamic and space-saving element tailored for React applications, offering developers an efficient way to manage and present content in a concise manner. This component provides a seamless solution for displaying large amounts of information while optimizing screen real estate and enhancing user interaction.

With the Accordion component, developers can create expandable sections of content that can be toggled open or closed, allowing users to focus on specific details when needed. This feature is particularly useful for displaying lengthy text, detailed descriptions, or additional information without overwhelming the user interface.

### Installation 

To integrate the this component into your React apps, you can install it using npm or yarn: `npm i --save @react-ck/accordion` or `yarn add @react-ck/accordion`.

You will also need to set up the manager, install it using npm or yarn: `npm i --save @react-ck/manager` or `yarn add @react-ck/manager`.

Wrap your app root with the theme provider and use this component:

```tsx
import { Manager } from "@react-ck/manager";
import { Accordion } from "@react-ck/accordion";

const myApp = () => (
    <Manager>
        <Accordion ... />
    </Manager>
);
```

<!-- storybook-ignore -->

---

Check the documentation website - [react-ck.js.org](https://react-ck.js.org).
npm package: @react-ck/alert
Description: > :warning: **WARNING**: This component library is being updated frequently and it's currently unstable due to being in it's early stages, we advice you to use only in production environments only after version **2.0.0**.
Latest version: 4.0.0

# React CK | Alert Component

> :warning: **WARNING**: This component library is being updated frequently and it's currently unstable due to being in it's early stages, we advice you to use only in production environments only after version **2.0.0**.


The Alert component is a crucial tool in React applications, offering developers a dynamic and adaptable solution for effectively communicating important messages to users. Crafted with flexibility in mind, this component empowers developers to create visually appealing and user-friendly alerts that seamlessly blend into the overall design of their applications.

### Installation 

To integrate the this component into your React apps, you can install it using npm or yarn: `npm i --save @react-ck/alert` or `yarn add @react-ck/alert`.

You will also need to set up the manager, install it using npm or yarn: `npm i --save @react-ck/manager` or `yarn add @react-ck/manager`.

Wrap your app root with the theme provider and use this component:

```tsx
import { Manager } from "@react-ck/manager";
import { Alert } from "@react-ck/alert";

const myApp = () => (
    <Manager>
        <Alert ... />
    </Manager>
);
```

<!-- storybook-ignore -->

---

Check the documentation website - [react-ck.js.org](https://react-ck.js.org).
npm package: @react-ck/badge
Description: > :warning: **WARNING**: This component library is being updated frequently and it's currently unstable due to being in it's early stages, we advice you to use only in production environments only after version **2.0.0**.
Latest version: 2.0.0

# React CK | Badge Component

> :warning: **WARNING**: This component library is being updated frequently and it's currently unstable due to being in it's early stages, we advice you to use only in production environments only after version **2.0.0**.

A Badge React component is a small, visually distinct element typically used to highlight or signify specific information within a user interface. It serves as a visual indicator, often containing concise text or a numerical value, and is commonly employed to showcase notifications, counts, or status indicators. The Badge component is versatile, allowing developers to customize its appearance to match the overall design language of their application, making it a handy tool for enhancing user experience and drawing attention to important elements.

### Installation 

To integrate the this component into your React apps, you can install it using npm or yarn: `npm i --save @react-ck/badge` or `yarn add @react-ck/badge`.

You will also need to set up the manager, install it using npm or yarn: `npm i --save @react-ck/manager` or `yarn add @react-ck/manager`.

Wrap your app root with the theme provider and use this component:

```tsx
import { Manager } from "@react-ck/manager";
import { Badge } from "@react-ck/badge";

const myApp = () => (
    <Manager>
        <Badge ... />
    </Manager>
);
```

<!-- storybook-ignore -->

---

Check the documentation website - [react-ck.js.org](https://react-ck.js.org).
npm package: @react-ck/banner
Description: > :warning: **WARNING**: This component library is being updated frequently and it's currently unstable due to being in it's early stages, we advice you to use only in production environments only after version **2.0.0**.
Latest version: 2.0.0

# React CK | Banner Component

> :warning: **WARNING**: This component library is being updated frequently and it's currently unstable due to being in it's early stages, we advice you to use only in production environments only after version **2.0.0**.

The Banner component is a versatile and visually appealing element designed specifically for React applications.
It serves as a prominent interface element, allowing developers to showcase images, messages,
or calls to action effectively. With this component, developers can create engaging and interactive banners tailored to their application's needs.

### Installation 

To integrate the this component into your React apps, you can install it using npm or yarn: `npm i --save @react-ck/banner` or `yarn add @react-ck/banner`.

You will also need to set up the manager, install it using npm or yarn: `npm i --save @react-ck/manager` or `yarn add @react-ck/manager`.

Wrap your app root with the theme provider and use this component:

```tsx
import { Manager } from "@react-ck/manager";
import { Banner } from "@react-ck/banner";

const myApp = () => (
    <Manager>
        <Banner ... />
    </Manager>
);
```

<!-- storybook-ignore -->

---

Check the documentation website - [react-ck.js.org](https://react-ck.js.org).
npm package: @react-ck/button
Description: > :warning: **WARNING**: This component library is being updated frequently and it's currently unstable due to being in it's early stages, we advice you to use only in production environments only after version **2.0.0**.
Latest version: 2.0.0

# React CK | Button Component

> :warning: **WARNING**: This component library is being updated frequently and it's currently unstable due to being in it's early stages, we advice you to use only in production environments only after version **2.0.0**.

The Button component is a versatile and highly customizable element tailored for React applications. It provides developers with a powerful tool to create interactive user interfaces. The component offers options to define the button's color scheme and integrate icons or custom SVG components seamlessly. Developers can utilize the skin prop to specify the color scheme as "primary" or "secondary" and the icon prop to include any valid React node. This flexibility allows for the creation of visually appealing buttons with various styles and functionalities, enhancing the overall user experience in React applications. The Button component simplifies the process of building interactive UI elements, making it a valuable asset for developers.

### Installation 

To integrate the this component into your React apps, you can install it using npm or yarn: `npm i --save @react-ck/button` or `yarn add @react-ck/button`.

You will also need to set up the manager, install it using npm or yarn: `npm i --save @react-ck/manager` or `yarn add @react-ck/manager`.

Wrap your app root with the theme provider and use this component:

```tsx
import { Manager } from "@react-ck/manager";
import { Button } from "@react-ck/button";

const myApp = () => (
    <Manager>
        <Button ... />
    </Manager>
);
```

<!-- storybook-ignore -->

---

Check the documentation website - [react-ck.js.org](https://react-ck.js.org).
npm package: @react-ck/card
Description: > :warning: **WARNING**: This component library is being updated frequently and it's currently unstable due to being in it's early stages, we advice you to use only in production environments only after version **2.0.0**.
Latest version: 2.0.0

# React CK | Card Component

> :warning: **WARNING**: This component library is being updated frequently and it's currently unstable due to being in it's early stages, we advice you to use only in production environments only after version **2.0.0**.

The Card component is a versatile and essential building block for creating dynamic and interactive user interfaces in React applications. This component enables developers to showcase content in a structured and visually appealing manner. With the Card component, you can present various types of information, including text, images, and actions, effectively engaging users.

### Installation 

To integrate the this component into your React apps, you can install it using npm or yarn: `npm i --save @react-ck/card` or `yarn add @react-ck/card`.

You will also need to set up the manager, install it using npm or yarn: `npm i --save @react-ck/manager` or `yarn add @react-ck/manager`.

Wrap your app root with the theme provider and use this component:

```tsx
import { Manager } from "@react-ck/manager";
import { Card } from "@react-ck/card";

const myApp = () => (
    <Manager>
        <Card ... />
    </Manager>
);
```

<!-- storybook-ignore -->

---

Check the documentation website - [react-ck.js.org](https://react-ck.js.org).
npm package: @react-ck/chip
Description: > :warning: **WARNING**: This component library is being updated frequently and it's currently unstable due to being in it's early stages, we advice you to use only in production environments only after version **2.0.0**.
Latest version: 2.1.0

# React CK | Chip Component

> :warning: **WARNING**: This component library is being updated frequently and it's currently unstable due to being in it's early stages, we advice you to use only in production environments only after version **2.0.0**.

The Chip component is a dynamic and adaptable element designed specifically for React applications, providing developers with a versatile solution for displaying and interacting with small pieces of information. This component serves as a compact container for various types of content, such as text, icons, or images, allowing developers to present data in an organized and visually appealing manner.

With the Chip component, developers can effortlessly showcase different types of information, including tags, categories, or user avatars. Its customizable features enable developers to define the chip's appearance, such as background color, text color, and border radius, ensuring seamless integration into any user interface design.

One of the key advantages of the Chip component lies in its ability to handle user interactions efficiently. Developers can implement click events or hover effects to enhance user engagement and create intuitive user experiences. Additionally, the component supports integration with icons or custom SVG elements, enabling developers to add visual context to the displayed information.

In summary, the React Chip component simplifies the process of displaying concise information within React applications. Its flexibility, interactive capabilities, and customization options make it an invaluable tool for developers, enhancing the overall user experience and improving the presentation of data in various contexts.

### Installation 

To integrate the this component into your React apps, you can install it using npm or yarn: `npm i --save @react-ck/chip` or `yarn add @react-ck/chip`.

You will also need to set up the manager, install it using npm or yarn: `npm i --save @react-ck/manager` or `yarn add @react-ck/manager`.

Wrap your app root with the theme provider and use this component:

```tsx
import { Manager } from "@react-ck/manager";
import { Chip } from "@react-ck/chip";

const myApp = () => (
    <Manager>
        <Chip ... />
    </Manager>
);
```

<!-- storybook-ignore -->

---

Check the documentation website - [react-ck.js.org](https://react-ck.js.org).
npm package: @react-ck/collapse
Description: > :warning: **WARNING**: This component library is being updated frequently and it's currently unstable due to being in it's early stages, we advice you to use only in production environments only after version **2.0.0**.
Latest version: 2.0.0

# React CK | Collapse Component

> :warning: **WARNING**: This component library is being updated frequently and it's currently unstable due to being in it's early stages, we advice you to use only in production environments only after version **2.0.0**.

The Collapse component is a dynamic and space-saving element tailored for React applications, offering developers an efficient way to manage and present content in a concise manner. This component provides a seamless solution for displaying large amounts of information while optimizing screen real estate and enhancing user interaction.

With the Collapse component, developers can create expandable sections of content that can be toggled open or closed, allowing users to focus on specific details when needed. This feature is particularly useful for displaying lengthy text, detailed descriptions, or additional information without overwhelming the user interface.

Developers can customize the Collapse component to match the application's design language, defining aspects such as transition animations, icons for toggle buttons, and content positioning. This flexibility ensures that the Collapse component seamlessly integrates into the overall user interface, providing a cohesive and intuitive user experience.

One of the primary benefits of the Collapse component is its ability to improve the accessibility and readability of complex content. By organizing information into collapsible sections, developers can enhance the overall usability of their applications, making it easier for users to navigate and comprehend the presented data.

In summary, the React Collapse component streamlines the presentation of extensive content within React applications. Its interactive and customizable nature, coupled with its ability to optimize space and enhance user accessibility, makes it an essential tool for developers aiming to create user-friendly interfaces with a focus on efficient content management.

### Installation 

To integrate the this component into your React apps, you can install it using npm or yarn: `npm i --save @react-ck/collapse` or `yarn add @react-ck/collapse`.

You will also need to set up the manager, install it using npm or yarn: `npm i --save @react-ck/manager` or `yarn add @react-ck/manager`.

Wrap your app root with the theme provider and use this component:

```tsx
import { Manager } from "@react-ck/manager";
import { Collapse } from "@react-ck/collapse";

const myApp = () => (
    <Manager>
        <Collapse ... />
    </Manager>
);
```

<!-- storybook-ignore -->

---

Check the documentation website - [react-ck.js.org](https://react-ck.js.org).
npm package: @react-ck/container
Description: > :warning: **WARNING**: This component library is being updated frequently and it's currently unstable due to being in it's early stages, we advice you to use only in production environments only after version **2.0.0**.
Latest version: 2.0.0

# React CK | Container Component

> :warning: **WARNING**: This component library is being updated frequently and it's currently unstable due to being in it's early stages, we advice you to use only in production environments only after version **2.0.0**.

The Container component in React is a fundamental building block that provides structure and organization to web applications. Acting as a versatile layout element, the Container component serves as a designated space for housing other UI elements, ensuring consistent spacing, alignment, and overall visual harmony.

### Installation 

To integrate the this component into your React apps, you can install it using npm or yarn: `npm i --save @react-ck/container` or `yarn add @react-ck/container`.

You will also need to set up the manager, install it using npm or yarn: `npm i --save @react-ck/manager` or `yarn add @react-ck/manager`.

Wrap your app root with the theme provider and use this component:

```tsx
import { Manager } from "@react-ck/manager";
import { Container } from "@react-ck/container";

const myApp = () => (
    <Manager>
        <Container ... />
    </Manager>
);
```

<!-- storybook-ignore -->

---

Check the documentation website - [react-ck.js.org](https://react-ck.js.org).
npm package: @react-ck/data-table
Description: > :warning: **WARNING**: This component library is being updated frequently and it's currently unstable due to being in it's early stages, we advice you to use only in production environments only after version **2.0.0**.
Latest version: 3.1.46

# React CK | Data Table Component

> :warning: **WARNING**: This component library is being updated frequently and it's currently unstable due to being in it's early stages, we advice you to use only in production environments only after version **2.0.0**.

The React Table component is a versatile element designed to efficiently display structured data in a tabular format within React applications. Unlike traditional table components, this component accepts an array of records, where each record is represented as an object with named keys and corresponding React nodes. This flexibility allows developers to easily populate tables with dynamic and diverse content without the need for complex nesting.

By accepting an `Array<Record<string, React.ReactNode>>` as input, developers can populate the table with data in a concise and straightforward manner. Each record in the array corresponds to a row in the table, and the keys within the records determine the columns. This streamlined approach simplifies the process of rendering data-driven tables, making it ideal for dynamic applications where the content may vary based on user input or API responses.

The React Table component provides essential features such as sorting, pagination, and search functionality out of the box, enhancing user experience and enabling seamless interaction with large datasets. Developers can also customize the appearance and behavior of the table to match the application's design language, ensuring a cohesive and visually appealing presentation.

In summary, the React Table component offers a pragmatic solution for displaying structured data in React applications. Its ability to handle an array of records with named keys and React nodes simplifies the data rendering process, making it an efficient choice for developers aiming to create responsive and interactive tables in their projects.

### Installation 

To integrate the this component into your React apps, you can install it using npm or yarn: `npm i --save @react-ck/data-table` or `yarn add @react-ck/data-table`.

You will also need to set up the manager, install it using npm or yarn: `npm i --save @react-ck/manager` or `yarn add @react-ck/manager`.

Wrap your app root with the theme provider and use this component:

```tsx
import { Manager } from "@react-ck/manager";
import { DataTable } from "@react-ck/data-table";

const myApp = () => (
    <Manager>
        <DataTable ... />
    </Manager>
);
```

<!-- storybook-ignore -->

---

Check the documentation website - [react-ck.js.org](https://react-ck.js.org).
npm package: @react-ck/divider
Description: > :warning: **WARNING**: This component library is being updated frequently and it's currently unstable due to being in it's early stages, we advice you to use only in production environments only after version **2.0.0**.
Latest version: 2.0.0

# React CK | Divider Component

> :warning: **WARNING**: This component library is being updated frequently and it's currently unstable due to being in it's early stages, we advice you to use only in production environments only after version **2.0.0**.

The React Divider component is a minimalist element designed to create a clear visual distinction between sections or elements within a user interface. This simple component serves a singular purpose: rendering a horizontal or vertical line, enhancing the overall layout and readability of the content.

Developers can easily integrate the React Divider component into their applications to separate different sections of a page or group related elements, providing a subtle visual cue to users. The component offers the flexibility to render both horizontal and vertical lines, allowing developers to choose the appropriate orientation based on the layout requirements.

With its straightforward implementation, the React Divider component is ideal for projects where simplicity and clarity are paramount. Its unobtrusive design ensures that it seamlessly blends into various user interfaces, maintaining a clean and organized appearance without overwhelming the overall visual hierarchy.

In summary, the React Divider component is a lightweight and essential tool for developers seeking a straightforward solution to create visual separation between elements. Its ability to render horizontal or vertical lines makes it a versatile choice for enhancing the structure and readability of web applications without unnecessary complexity.

### Installation 

To integrate the this component into your React apps, you can install it using npm or yarn: `npm i --save @react-ck/divider` or `yarn add @react-ck/divider`.

You will also need to set up the manager, install it using npm or yarn: `npm i --save @react-ck/manager` or `yarn add @react-ck/manager`.

Wrap your app root with the theme provider and use this component:

```tsx
import { Manager } from "@react-ck/manager";
import { Divider } from "@react-ck/divider";

const myApp = () => (
    <Manager>
        <Divider ... />
    </Manager>
);
```

<!-- storybook-ignore -->

---

Check the documentation website - [react-ck.js.org](https://react-ck.js.org).
npm package: @react-ck/empty-state
Description: > :warning: **WARNING**: This component library is being updated frequently and it's currently unstable due to being in it's early stages, we advice you to use only in production environments only after version **2.0.0**.
Latest version: 2.0.0

# React CK | Empty State Component

> :warning: **WARNING**: This component library is being updated frequently and it's currently unstable due to being in it's early stages, we advice you to use only in production environments only after version **2.0.0**.

The Empty State component serves as a crucial element in React applications, providing a clean and user-friendly experience when no content is available.

### Installation 

To integrate the this component into your React apps, you can install it using npm or yarn: `npm i --save @react-ck/empty-state` or `yarn add @react-ck/empty-state`.

You will also need to set up the manager, install it using npm or yarn: `npm i --save @react-ck/manager` or `yarn add @react-ck/manager`.

Wrap your app root with the theme provider and use this component:

```tsx
import { Manager } from "@react-ck/manager";
import { EmptyState } from "@react-ck/empty-state";

const myApp = () => (
    <Manager>
        <EmptyState ... />
    </Manager>
);
```

<!-- storybook-ignore -->

---

Check the documentation website - [react-ck.js.org](https://react-ck.js.org).
npm package: @react-ck/form-field
Description: > :warning: **WARNING**: This component library is being updated frequently and it's currently unstable due to being in it's early stages, we advice you to use only in production environments only after version **2.0.0**.
Latest version: 2.0.3

# React CK | FormField Component

> :warning: **WARNING**: This component library is being updated frequently and it's currently unstable due to being in it's early stages, we advice you to use only in production environments only after version **2.0.0**.

The FormField component is a versatile and visually adaptable element that provides a consistent layout and input peripherals for React applications. It ensures a uniform structure for various form-related elements, offering developers a convenient way to structure form fields within their applications.

The component allows for easy integration of input elements within the content section, providing a cohesive and structured appearance.

### Installation 

To integrate the this component into your React apps, you can install it using npm or yarn: `npm i --save @react-ck/form-field` or `yarn add @react-ck/form-field`.

You will also need to set up the manager, install it using npm or yarn: `npm i --save @react-ck/manager` or `yarn add @react-ck/manager`.

Wrap your app root with the theme provider and use this component:

```tsx
import { Manager } from "@react-ck/manager";
import { FormField } from "@react-ck/form-field";

const myApp = () => (
    <Manager>
        <FormField ... />
    </Manager>
);
```

<!-- storybook-ignore -->

---

Check the documentation website - [react-ck.js.org](https://react-ck.js.org).
npm package: @react-ck/grid
Description: > :warning: **WARNING**: This component library is being updated frequently and it's currently unstable due to being in it's early stages, we advice you to use only in production environments only after version **2.0.0**.
Latest version: 2.0.0

# React CK | Grid Component

> :warning: **WARNING**: This component library is being updated frequently and it's currently unstable due to being in it's early stages, we advice you to use only in production environments only after version **2.0.0**.

The React Grid component features a robust 12-column system, providing developers with a flexible framework to create responsive and well-structured layouts. This system allows elements to be precisely positioned within the grid, offering granular control over their placement and alignment. With the ability to utilize these 12 columns, developers can design layouts that are visually balanced and optimized for different screen sizes.

Moreover, the React Grid component offers the convenience of both wrapping and nowrap behaviors. When set to wrap, the grid intelligently adjusts its content, allowing items to flow into new rows as needed. This ensures that the layout gracefully accommodates varying amounts of content without sacrificing its structure. Conversely, the nowrap option prevents items from wrapping onto new lines, maintaining a compact and streamlined appearance.

By combining the 12-column system with the flexibility to wrap or nowrap elements, developers can effortlessly create responsive designs that adapt to diverse devices and content lengths. This versatile component empowers developers to craft visually appealing interfaces that maintain consistency and readability across different screen sizes, enhancing the overall user experience.

### Installation 

To integrate the this component into your React apps, you can install it using npm or yarn: `npm i --save @react-ck/grid` or `yarn add @react-ck/grid`.

You will also need to set up the manager, install it using npm or yarn: `npm i --save @react-ck/manager` or `yarn add @react-ck/manager`.

Wrap your app root with the theme provider and use this component:

```tsx
import { Manager } from "@react-ck/manager";
import { GridContainer, GridColumn } from "@react-ck/grid";

const myApp = () => (
    <Manager>
        <GridContainer ... />
    </Manager>
);
```

<!-- storybook-ignore -->

---

Check the documentation website - [react-ck.js.org](https://react-ck.js.org).
npm package: @react-ck/input
Description: > :warning: **WARNING**: This component library is being updated frequently and it's currently unstable due to being in it's early stages, we advice you to use only in production environments only after version **2.0.0**.
Latest version: 2.0.3

# React CK | Input Component

> :warning: **WARNING**: This component library is being updated frequently and it's currently unstable due to being in it's early stages, we advice you to use only in production environments only after version **2.0.0**.

The React Input component is a fundamental building block for user interactions within React applications. It provides a user-friendly way to collect and validate user input, ranging from simple text entries to more complex data such as dates or email addresses.

This component allows developers to create various types of input fields, including text inputs, password inputs, checkboxes, radio buttons, and more. Developers can customize the appearance and behavior of the input fields, defining attributes like placeholder text, default values, and validation rules.

One of the key features of the React Input component is its ability to handle user interactions in real time. Developers can implement event listeners to capture user keystrokes, clicks, or selections, enabling dynamic responses to user input. This real-time interaction enhances the user experience, providing instant feedback and validation messages as users enter data.

Furthermore, the React Input component supports accessibility features, ensuring that users with disabilities can interact with input fields using screen readers and keyboard navigation. Developers can add ARIA roles and labels to enhance the input component's accessibility, making it inclusive for all users.

In summary, the React Input component is a crucial element for creating interactive and accessible forms in React applications. Its versatility, real-time interaction capabilities, and support for various input types make it an essential tool for developers striving to build user-friendly and inclusive interfaces.

### Installation 

To integrate the this component into your React apps, you can install it using npm or yarn: `npm i --save @react-ck/input` or `yarn add @react-ck/input`.

You will also need to set up the manager, install it using npm or yarn: `npm i --save @react-ck/manager` or `yarn add @react-ck/manager`.

Wrap your app root with the theme provider and use this component:

```tsx
import { Manager } from "@react-ck/manager";
import { Input } from "@react-ck/input";

const myApp = () => (
    <Manager>
        <Input ... />
    </Manager>
);
```

<!-- storybook-ignore -->

---

Check the documentation website - [react-ck.js.org](https://react-ck.js.org).
npm package: @react-ck/list
Description: > :warning: **WARNING**: This component library is being updated frequently and it's currently unstable due to being in it's early stages, we advice you to use only in production environments only after version **2.0.0**.
Latest version: 2.0.0

# React CK | List Component

> :warning: **WARNING**: This component library is being updated frequently and it's currently unstable due to being in it's early stages, we advice you to use only in production environments only after version **2.0.0**.

The React List component is a powerful and efficient tool for displaying lists of items within React applications. Whether used for menus, navigation, or dynamic content display, this component simplifies the process of rendering and managing lists of varying lengths and complexities.

With the React List component, developers can effortlessly handle arrays of data, transforming them into visually appealing and interactive lists. This component supports different list item types, allowing developers to create simple text-based lists, image galleries, or complex interactive elements within each list item.

### Installation 

To integrate the this component into your React apps, you can install it using npm or yarn: `npm i --save @react-ck/list` or `yarn add @react-ck/list`.

You will also need to set up the manager, install it using npm or yarn: `npm i --save @react-ck/manager` or `yarn add @react-ck/manager`.

Wrap your app root with the theme provider and use this component:

```tsx
import { Manager } from "@react-ck/manager";
import { List } from "@react-ck/list";

const myApp = () => (
    <Manager>
        <List ... />
    </Manager>
);
```

<!-- storybook-ignore -->

---

Check the documentation website - [react-ck.js.org](https://react-ck.js.org).
npm package: @react-ck/modal
Description: > :warning: **WARNING**: This component library is being updated frequently and it's currently unstable due to being in it's early stages, we advice you to use only in production environments only after version **2.0.0**.
Latest version: 3.2.29

# React CK | Modal Component

> :warning: **WARNING**: This component library is being updated frequently and it's currently unstable due to being in it's early stages, we advice you to use only in production environments only after version **2.0.0**.

The React Modal component is a versatile and sleek solution for handling modal dialogs within React applications. Whether it's for notifications, alerts, or displaying additional information, this component streamlines the process of creating and managing modal interactions with users.

With the React Modal component, developers can effortlessly introduce modals into their applications, providing a clean and visually appealing way to grab users' attention. This component supports various configurations, allowing developers to create modals with custom content, control their appearance, and define behaviors like dismissibility.

### Installation 

To integrate the this component into your React apps, you can install it using npm or yarn: `npm i --save @react-ck/modal` or `yarn add @react-ck/modal`.

You will also need to set up the manager, install it using npm or yarn: `npm i --save @react-ck/manager` or `yarn add @react-ck/manager`.

Wrap your app root with the theme provider and use this component:

```tsx
import { Manager } from "@react-ck/manager";
import { Modal } from "@react-ck/modal";

const myApp = () => (
    <Manager>
        <Modal>
            <ModalHeader ... />
            ...
            <ModalFooter ... />
        </Modal>
    </Manager>
);
```

<!-- storybook-ignore -->

---

Check the documentation website - [react-ck.js.org](https://react-ck.js.org).
npm package: @react-ck/overlay
Description: > :warning: **WARNING**: This component library is being updated frequently and it's currently unstable due to being in it's early stages, we advice you to use only in production environments only after version **2.0.0**.
Latest version: 2.0.0

# React CK | Overlay Component

> :warning: **WARNING**: This component library is being updated frequently and it's currently unstable due to being in it's early stages, we advice you to use only in production environments only after version **2.0.0**.

The React Overlay component is a versatile and essential element for creating modal dialogs, tooltips, popovers, and other overlay-based UI elements within React applications. This component provides developers with a powerful way to display additional information or actions without navigating away from the current context.

With the React Overlay component, developers can create visually appealing overlays that appear above the main content, drawing users' attention to specific information or interactive features. These overlays often include content such as forms, images, or detailed explanations, enhancing the user experience by providing contextually relevant information.

### Installation 

To integrate the this component into your React apps, you can install it using npm or yarn: `npm i --save @react-ck/overlay` or `yarn add @react-ck/overlay`.

You will also need to set up the manager, install it using npm or yarn: `npm i --save @react-ck/manager` or `yarn add @react-ck/manager`.

Wrap your app root with the theme provider and use this component:

```tsx
import { Manager } from "@react-ck/manager";
import { Overlay } from "@react-ck/overlay";

const myApp = () => (
    <Manager>
        <Overlay ... />
    </Manager>
);
```

<!-- storybook-ignore -->

---

Check the documentation website - [react-ck.js.org](https://react-ck.js.org).
npm package: @react-ck/pagination
Description: > :warning: **WARNING**: This component library is being updated frequently and it's currently unstable due to being in it's early stages, we advice you to use only in production environments only after version **2.0.0**.
Latest version: 2.0.0

# React CK | Pagination Component

> :warning: **WARNING**: This component library is being updated frequently and it's currently unstable due to being in it's early stages, we advice you to use only in production environments only after version **2.0.0**.

The React Pagination component is a user-friendly control system designed to navigate through data distributed across multiple pages, such as lists or documents. It empowers developers to enhance user experience by providing intuitive controls for page navigation.

With the React Pagination component, developers can seamlessly integrate pagination into their applications. It's a practical solution for breaking down and presenting data in a structured manner. This component comes with customizable options, allowing developers to define the number of visible slots or pages, set the current active page, and handle page changes through a provided callback function.

### Installation 

To integrate the this component into your React apps, you can install it using npm or yarn: `npm i --save @react-ck/pagination` or `yarn add @react-ck/pagination`.

You will also need to set up the manager, install it using npm or yarn: `npm i --save @react-ck/manager` or `yarn add @react-ck/manager`.

Wrap your app root with the theme provider and use this component:

```tsx
import { Manager } from "@react-ck/manager";
import { Pagination } from "@react-ck/Modal";

const myApp = () => (
    <Manager>
        <Pagination total={20} />
    </Manager>
);
```

<!-- storybook-ignore -->

---

Check the documentation website - [react-ck.js.org](https://react-ck.js.org).
npm package: @react-ck/progress
Description: > :warning: **WARNING**: This component library is being updated frequently and it's currently unstable due to being in it's early stages, we advice you to use only in production environments only after version **2.0.0**.
Latest version: 2.0.0

# React CK | Progress Component

> :warning: **WARNING**: This component library is being updated frequently and it's currently unstable due to being in it's early stages, we advice you to use only in production environments only after version **2.0.0**.

The React Progress component is a dynamic and engaging tool tailored for React applications, offering developers a seamless solution for displaying loading progress. Whether it's fetching data, submitting forms, or any other asynchronous task, this component keeps users in the loop, visually signaling that something is happening behind the scenes.

With the React Progress component, developers can effortlessly integrate progress indicators into their applications, providing users with a clear visual representation of ongoing processes. This component supports various configurations, allowing developers to customize the appearance of the progress indicator, choose different styles, and adapt it to the overall design language of the application.


### Installation 

To integrate the this component into your React apps, you can install it using npm or yarn: `npm i --save @react-ck/progress` or `yarn add @react-ck/progress`.

You will also need to set up the manager, install it using npm or yarn: `npm i --save @react-ck/manager` or `yarn add @react-ck/manager`.

Wrap your app root with the theme provider and use this component:

```tsx
import { Manager } from "@react-ck/manager";
import { Progress } from "@react-ck/progress";

const myApp = () => (
    <Manager>
        <Progress ... />
    </Manager>
);
```

<!-- storybook-ignore -->

---

Check the documentation website - [react-ck.js.org](https://react-ck.js.org).
npm package: @react-ck/provisional
Description: > :warning: **WARNING**: This component library is being updated frequently and it's currently unstable due to being in it's early stages, we advice you to use only in production environments only after version **2.0.0**.
Latest version: 5.0.3

# React CK | Provisional Components

> :warning: **WARNING**: This component library is being updated frequently and it's currently unstable due to being in it's early stages, we advice you to use only in production environments only after version **2.0.0**.

Provisional components that are candidates for stable release.

### Installation 

To integrate the this component into your React apps, you can install it using npm or yarn: `npm i --save @react-ck/provisional` or `yarn add @react-ck/provisional`.

You will also need to set up the manager, install it using npm or yarn: `npm i --save @react-ck/manager` or `yarn add @react-ck/manager`.

Wrap your app root with the theme provider and use this component:

```tsx
import { Manager } from "@react-ck/manager";
import { SomeComponent } from "@react-ck/provisional";

const myApp = () => (
    <Manager>
        <SomeComponent ... />
    </Manager>
);
```

<!-- storybook-ignore -->

---

Check the documentation website - [react-ck.js.org](https://react-ck.js.org).
npm package: @react-ck/select
Description: > :warning: **WARNING**: This component library is being updated frequently and it's currently unstable due to being in it's early stages, we advice you to use only in production environments only after version **2.0.0**.
Latest version: 2.1.0

# React CK | Select Component

> :warning: **WARNING**: This component library is being updated frequently and it's currently unstable due to being in it's early stages, we advice you to use only in production environments only after version **2.0.0**.

The React Select component in the React-CK library is a fundamental tool for empowering user interactions in React applications. It provides an elegant and user-friendly way to handle selections, offering a polished experience for users to pick from a predefined set of options.

Developers can utilize this component to create various types of select fields, including single and multiple selections, with customizable styles and behaviors. Dive into the customization pool and define attributes like placeholder text, default values, and option groups to tailor the select component to suit your application's needs.

### Installation 

To integrate the this component into your React apps, you can install it using npm or yarn: `npm i --save @react-ck/select` or `yarn add @react-ck/select`.

You will also need to set up the manager, install it using npm or yarn: `npm i --save @react-ck/manager` or `yarn add @react-ck/manager`.

Wrap your app root with the theme provider and use this component:

```tsx
import { Manager } from "@react-ck/manager";
import { Select } from "@react-ck/select";

const myApp = () => (
    <Manager>
        <Select ... />
    </Manager>
);
```

<!-- storybook-ignore -->

---

Check the documentation website - [react-ck.js.org](https://react-ck.js.org).
npm package: @react-ck/skeleton
Description: > :warning: **WARNING**: This component library is being updated frequently and it's currently unstable due to being in it's early stages, we advice you to use only in production environments only after version **2.0.0**.
Latest version: 2.0.0

# React CK | Skeleton Component

> :warning: **WARNING**: This component library is being updated frequently and it's currently unstable due to being in it's early stages, we advice you to use only in production environments only after version **2.0.0**.

The Skeleton component is a versatile and adaptable element designed specifically for React applications, providing developers with a dynamic solution for displaying placeholder content while actual data is loading. This component serves as a visual representation of the content structure, giving users a sense of anticipation and engagement even before the actual data is available.

With the Skeleton component, developers can effortlessly create placeholders for various types of content, such as text blocks, images, or cards. Its customizable features enable developers to define the skeleton's appearance, such as background color, animation style, and spacing, ensuring seamless integration into any user interface design.


### Installation 

To integrate the this component into your React apps, you can install it using npm or yarn: `npm i --save @react-ck/skeleton` or `yarn add @react-ck/skeleton`.

You will also need to set up the manager, install it using npm or yarn: `npm i --save @react-ck/manager` or `yarn add @react-ck/manager`.

Wrap your app root with the theme provider and use this component:

```tsx
import { Manager } from "@react-ck/manager";
import { Skeleton } from "@react-ck/skeleton";

const myApp = () => (
    <Manager>
        <Skeleton ... />
    </Manager>
);
```

<!-- storybook-ignore -->

---

Check the documentation website - [react-ck.js.org](https://react-ck.js.org).
npm package: @react-ck/spinner
Description: > :warning: **WARNING**: This component library is being updated frequently and it's currently unstable due to being in it's early stages, we advice you to use only in production environments only after version **2.0.0**.
Latest version: 4.0.0

# React CK | Spinner Component

> :warning: **WARNING**: This component library is being updated frequently and it's currently unstable due to being in it's early stages, we advice you to use only in production environments only after version **2.0.0**.

A versatile and customizable spinner component for React applications, providing developers with a dynamic solution to enhance user engagement and indicate loading states. This component serves as a visual representation of activity within the application, keeping users informed and engaged while waiting for data to load.

### Installation 

To integrate the this component into your React apps, you can install it using npm or yarn: `npm i --save @react-ck/spinner` or `yarn add @react-ck/spinner`.

You will also need to set up the manager, install it using npm or yarn: `npm i --save @react-ck/manager` or `yarn add @react-ck/manager`.

Wrap your app root with the theme provider and use this component:

```tsx
import { Manager } from "@react-ck/manager";
import { Spinner } from "@react-ck/spinner";

const myApp = () => (
    <Manager>
        <Spinner ... />
    </Manager>
);
```

<!-- storybook-ignore -->

---

Check the documentation website - [react-ck.js.org](https://react-ck.js.org).