open-index/open-npm huggingface dataset:
npm package: @spellix/avatar
Description: Component for user avatar
Latest version: 3.0.18

# @spellix/avatar

A Quick description of the component

> This component is generated automatically, please add a description and usage instructions below.

## Short description

Component for user avatar

## Installation

```sh
yarn add @spellix/avatar
# or
npm i @spellix/avatar
# or
pnpm i @spellix/avatar
```

## Usage

Import Avatar from the package and configure it with props as needed:

```javascript
import { Avatar } from '@spellix/avatar';

export const App = () => {
  return <Avatar {...({/* props for the component */})} />;
};
```
npm package: @spellix/badge
Description: Component used to display statuses and other information in a short form
Latest version: 3.0.18

# @spellix/badge

A Quick description of the component

> This component is generated automatically, please add a description and usage instructions below.

## Short description

Component used to display statuses and other information in a short form

## Installation

```sh
yarn add @spellix/badge
# or
npm i @spellix/badge
# or
pnpm i @spellix/badge
```

## Usage

Import Badge from the package and configure it with props as needed:

```javascript
import { Badge } from '@spellix/badge';

export const App = () => {
  return <Badge {...({/* props for the component */})} />;
};
```
npm package: @spellix/button-compact
Description: Compact icon only button
Latest version: 3.0.18

# @spellix/button-compact

A Quick description of the component

> This component is generated automatically, please add a description and usage instructions below.

## Short description

Compact icon only button

## Installation

```sh
yarn add @spellix/button-compact
# or
npm i @spellix/button-compact
# or
pnpm i @spellix/button-compact
```

## Usage

Import ButtonCompact from the package and configure it with props as needed:

```javascript
import { ButtonCompact } from '@spellix/button-compact';

export const App = () => {
  return <ButtonCompact {...({/* props for the component */})} />;
};
```
npm package: @spellix/divider
Description: This component is responsible for dividing different parts of ui
Latest version: 3.0.18

# @spellix/divider

A Quick description of the component

> This component is generated automatically, please add a description and usage instructions below.

## Short description

This component is responsible for dividing diferent parts of ui

## Installation

```sh
yarn add @spellix/divider
# or
npm i @spellix/divider
# or
pnpm i @spellix/divider
```

## Usage

Import Divider from the package and configure it with props as needed:

```javascript
import { Divider } from '@spellix/divider';

export const App = () => {
  return <Divider {...({/* props for the component */})} />;
};
```
npm package: @spellix/dropdown
Description: Common component used to accumulate many actions in a single place.
Latest version: 3.0.18

# @spellix/dropdown

A Quick description of the component

> This component is generated automatically, please add a description and usage instructions below.

## Short description

Common component used to accumulate many actions in a single place.

## Installation

```sh
yarn add @spellix/dropdown
# or
npm i @spellix/dropdown
# or
pnpm i @spellix/dropdown
```

## Usage

Import Dropdown from the package and configure it with props as needed:

```javascript
import { Dropdown } from '@spellix/dropdown';

export const App = () => {
  return <Dropdown {...({/* props for the component */})} />;
};
```
npm package: @spellix/empty-state
Description: Empty state cart with icon title and description
Latest version: 3.0.18

# @spellix/empty-state

A Quick description of the component

> This component is generated automatically, please add a description and usage instructions below.

## Short description

Empty state cart with icon title and description

## Installation

```sh
yarn add @spellix/empty-state
# or
npm i @spellix/empty-state
# or
pnpm i @spellix/empty-state
```

## Usage

Import EmptyState from the package and configure it with props as needed:

```javascript
import { EmptyState } from '@spellix/empty-state';

export const App = () => {
  return <EmptyState {...({/* props for the component */})} />;
};
```
npm package: @spellix/file-dropzone
Description: A component that gives ability to add convenient way to manipulate with files
Latest version: 3.0.18

# @spellix/file-dropzone

A Quick description of the component

> This component is generated automatically, please add a description and usage instructions below.

## Short description

A component that gives ability to add convenient way to manipulate with files

## Installation

```sh
yarn add @spellix/file-dropzone
# or
npm i @spellix/file-dropzone
# or
pnpm i @spellix/file-dropzone
```

## Usage

Import FileDropzone from the package and configure it with props as needed:

```javascript
import { FileDropzone } from '@spellix/file-dropzone';

export const App = () => {
  return <FileDropzone {...({/* props for the component */})} />;
};
```
npm package: @spellix/hint
Description: Hint component
Latest version: 3.0.18

# @spellix/hint

A Quick description of the component

> This component is generated automatically, please add a description and usage instructions below.

## Short description

Hint component

## Installation

```sh
yarn add @spellix/hint
# or
npm i @spellix/hint
# or
pnpm i @spellix/hint
```

## Usage

Import Hint from the package and configure it with props as needed:

```javascript
import { Hint } from '@spellix/hint';

export const App = () => {
  return <Hint {...({/* props for the component */})} />;
};
```
npm package: @spellix/nav-menu
Description: This is a header navigation menu for navigation across the application easily.
Latest version: 3.0.18

# @spellix/nav-bar

A Quick description of the component

> This component is generated automatically, please add a description and usage instructions below.

## Short description

This is a header navbar for navigation across the application easily.

## Installation

```sh
yarn add @spellix/nav-bar
# or
npm i @spellix/nav-bar
# or
pnpm i @spellix/nav-bar
```

## Usage

Import NavBar from the package and configure it with props as needed:

```javascript
import { NavBar } from '@spellix/nav-bar';

export const App = () => {
  return <NavBar {...({/* props for the component */})} />;
};
```
npm package: @spellix/pagination
Description: Dynamic pagination component
Latest version: 3.0.18

# @spellix/pagination

A Quick description of the component

> This component is generated automatically, please add a description and usage instructions below.

## Short description

Dynamic pagination component

## Installation

```sh
yarn add @spellix/pagination
# or
npm i @spellix/pagination
# or
pnpm i @spellix/pagination
```

## Usage

Import Pagination from the package and configure it with props as needed:

```javascript
import { Pagination } from '@spellix/pagination';

export const App = () => {
  return <Pagination {...({/* props for the component */})} />;
};
```
npm package: @spellix/popover
Description: Component for rendering popovers
Latest version: 3.0.18

# @spellix/popover

A Quick description of the component

> This component is generated automatically, please add a description and usage instructions below.

## Short description

Component for rendering popovers

## Installation

```sh
yarn add @spellix/popover
# or
npm i @spellix/popover
# or
pnpm i @spellix/popover
```

## Usage

Import Popover from the package and configure it with props as needed:

```javascript
import { Popover } from '@spellix/popover';

export const App = () => {
  return <Popover {...({/* props for the component */})} />;
};
```
npm package: @spellix/progress
Description: Component which indicates the progress of some process or task.
Latest version: 3.0.18

# @spellix/progress

A Quick description of the component

> This component is generated automatically, please add a description and usage instructions below.

## Short description

Component which indicates the progress of some process or task.

## Installation

```sh
yarn add @spellix/progress
# or
npm i @spellix/progress
# or
pnpm i @spellix/progress
```

## Usage

Import Progress from the package and configure it with props as needed:

```javascript
import { Progress } from '@spellix/progress';

export const App = () => {
  return <Progress {...({/* props for the component */})} />;
};
```
npm package: @spellix/scrollable
Description: Component that allows viewport scrolling
Latest version: 3.0.18

# @spellix/scrollable

A Quick description of the component

> This component is generated automatically, please add a description and usage instructions below.

## Short description

Component that allows viewport scrolling

## Installation

```sh
yarn add @spellix/scrollable
# or
npm i @spellix/scrollable
# or
pnpm i @spellix/scrollable
```

## Usage

Import Scrollable from the package and configure it with props as needed:

```javascript
import { Scrollable } from '@spellix/scrollable';

export const App = () => {
  return <Scrollable {...({/* props for the component */})} />;
};
```
npm package: @spellix/shared-utils
Description: A Quick description of the component
Latest version: 4.0.6

# @spellix/shared-utils

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @spellix/shared-utils
# or
npm i @spellix/shared-utils
```

## File structure

```
src/
├── common/ # Common utilities for all React versions
npm package: @spellix/skeleton
Description: Skeleton component
Latest version: 3.0.18

# @spellix/skeleton

A Quick description of the component

> This component is generated automatically, please add a description and usage instructions below.

## Short description

Skeleton component

## Installation

```sh
yarn add @spellix/skeleton
# or
npm i @spellix/skeleton
# or
pnpm i @spellix/skeleton
```

## Usage

Import Skeleton from the package and configure it with props as needed:

```javascript
import { Skeleton } from '@spellix/skeleton';

export const App = () => {
  return <Skeleton {...({/* props for the component */})} />;
};
```
npm package: @spellix/slot
Description: React slot component gives and ability to redefine wrapper component in a declarative way
Latest version: 3.0.18

# @spellix/slot

A Quick description of the component

> This component is generated automatically, please add a description and usage instructions below.

## Short description

React slot component gives and ability to redefine wrapper component in a declarative way

## Installation

```sh
yarn add @spellix/slot
# or
npm i @spellix/slot
# or
pnpm i @spellix/slot
```

## Usage

Import Slot from the package and configure it with props as needed:

```javascript
import { Slot } from '@spellix/slot';

export const App = () => {
  return <Slot {...({/* props for the component */})} />;
};
```
npm package: @spellix/status-dot
Description: Dot that indicates some status
Latest version: 3.0.18

# @spellix/status-dot

A Quick description of the component

> This component is generated automatically, please add a description and usage instructions below.

## Short description

Dot that indicates some status

## Installation

```sh
yarn add @spellix/status-dot
# or
npm i @spellix/status-dot
# or
pnpm i @spellix/status-dot
```

## Usage

Import StatusDot from the package and configure it with props as needed:

```javascript
import { StatusDot } from '@spellix/status-dot';

export const App = () => {
  return <StatusDot {...({/* props for the component */})} />;
};
```
npm package: @spellix/status-icon
Description: Icon that represents statuses, e.g. error, warning etc.
Latest version: 3.0.18

# @spellix/status-icon

A Quick description of the component

> This component is generated automatically, please add a description and usage instructions below.

## Short description

Icon that represents statuses, e.g. error, warning etc.

## Installation

```sh
yarn add @spellix/status-icon
# or
npm i @spellix/status-icon
# or
pnpm i @spellix/status-icon
```

## Usage

Import StatusIcon from the package and configure it with props as needed:

```javascript
import { StatusIcon } from '@spellix/status-icon';

export const App = () => {
  return <StatusIcon {...({/* props for the component */})} />;
};
```
npm package: @spellix/stepper
Description: This component is used for creation multi step user flows.
Latest version: 3.0.18

# @spellix/stepper

A Quick description of the component

> This component is generated automatically, please add a description and usage instructions below.

## Short description

This component is used for creation multi step user flows.

## Installation

```sh
yarn add @spellix/stepper
# or
npm i @spellix/stepper
# or
pnpm i @spellix/stepper
```

## Usage

Import Stepper from the package and configure it with props as needed:

```javascript
import { Stepper } from '@spellix/stepper';

export const App = () => {
  return <Stepper {...({/* props for the component */})} />;
};
```
npm package: @spellix/table
Description: Components for building great and beautiful tables
Latest version: 3.0.18

# @spellix/table

A Quick description of the component

> This component is generated automatically, please add a description and usage instructions below.

## Short description

Components for building great and beautiful tables

## Installation

```sh
yarn add @spellix/table
# or
npm i @spellix/table
# or
pnpm i @spellix/table
```

## Usage

Import Table from the package and configure it with props as needed:

```javascript
import { Table } from '@spellix/table';

export const App = () => {
  return <Table {...({/* props for the component */})} />;
};
```
npm package: @spellix/tabs
Description: A set of layered sections of content—known as tab panels—that are displayed one at a time.
Latest version: 3.0.18

# @spellix/tabs

A Quick description of the component

> This component is generated automatically, please add a description and usage instructions below.

## Short description

A set of layered sections of content—known as tab panels—that are displayed one at a time.

## Installation

```sh
yarn add @spellix/tabs
# or
npm i @spellix/tabs
# or
pnpm i @spellix/tabs
```

## Usage

Import Tabs from the package and configure it with props as needed:

```javascript
import { Tabs } from '@spellix/tabs';

export const App = () => {
  return <Tabs {...({/* props for the component */})} />;
};
```
npm package: @spellix/tooltip
Description: It&#x27;s common hint component to give user more information about some functionality.
Latest version: 3.0.18

# @spellix/tooltip

A Quick description of the component

> This component is generated automatically, please add a description and usage instructions below.

## Short description

It&#x27;s common hint component to give user more information about some functionality.

## Installation

```sh
yarn add @spellix/tooltip
# or
npm i @spellix/tooltip
# or
pnpm i @spellix/tooltip
```

## Usage

Import Tooltip from the package and configure it with props as needed:

```javascript
import { Tooltip } from '@spellix/tooltip';

export const App = () => {
  return <Tooltip {...({/* props for the component */})} />;
};
```
npm package: @spellix/types
Description: Shared types for all packages
Latest version: 4.0.5

# @mwkt/types

A Quick description of the utility

> This utility is generated automatically, please add a description and usage instructions below.

## Short description



## Installation

```sh
yarn add @mwkt/types
# or
npm i @mwkt/types
# or
pnpm i @mwkt/types
```

## Usage

Import `types` from the package and configure it with props as needed:

```javascript
import { types } from '@mwkt/types';

export const App = () => {
  const { /* utility return values */ } = types({/* utility arguments */});

  return (
    <>
      {/* component */}
    </>
  );
};
```
npm package: @spellix/use-media-query
Description: Hook is made to react on screen changes
Latest version: 3.0.5

# @spellix/use-media-query

A Quick description of the hook

> This hook is generated automatically, please add a description and usage instructions below.

## Short description

Hook is made to react on screen changes

## Installation

```sh
yarn add @spellix/use-media-query
# or
npm i @spellix/use-media-query
# or
pnpm i @spellix/use-media-query
```

## Usage

Import `useMediaQuery` from the package and configure it with props as needed:

```javascript
import { useMediaQuery } from '@spellix/use-media-query';

export const App = () => {
  const { /* hook return values */ } = useMediaQuery({/* hook arguments */});

  return (
    <>
      {/* component */}
    </>
  );
};
```
npm package: @spellix/use-previous
Description: The hook returns previous value that was passed in the place where the hook was used.
Latest version: 3.0.5

# @spellix/use-previous

A Quick description of the hook

> This hook is generated automatically, please add a description and usage instructions below.

## Short description

The hook returns previous value that was passed in the place where the hook was used.

## Installation

```sh
yarn add @spellix/use-previous
# or
npm i @spellix/use-previous
# or
pnpm i @spellix/use-previous
```

## Usage

Import `usePrevious` from the package and configure it with props as needed:

```javascript
import { usePrevious } from '@spellix/use-previous';

export const App = () => {
  const { /* hook return values */ } = usePrevious({/* hook arguments */});

  return (
    <>
      {/* component */}
    </>
  );
};
```
npm package: @spellix/vite-config-package
Description: Vite config for building packages
Latest version: 4.0.6

# @spellix/vite-config-package

`@spellix/vite-config-package` is a versatile Vite configuration utility designed to streamline the build process for both React and non-React packages. It offers a customizable way to configure your Vite build, supporting TypeScript, SWC, and Rollup plugins.

## Options

- `generateDts` (boolean): Generate TypeScript declaration files.
- `addClientDirective` (boolean): Add client directive using Rollup plugin.
- `externalPackages` (string[]): List of external packages for the build.
- `formats` (LibraryFormats[]): Output formats for the library build.
- `externalInputs` (InputOption): External input sources.
- `isReact` (boolean): Flag to include React specific plugins.

## Peer Dependencies

Ensure the following peer dependencies are installed in your project:

- `@vitejs/plugin-react-swc`
- `typescript`
- `vite`
- `vite-plugin-dts`

## Installation

```bash
npm install @spellix/vite-config-package @vitejs/plugin-react-swc typescript vite vite-plugin-dts --save-dev
# or
yarn add @spellix/vite-config-package @vitejs/plugin-react-swc typescript vite vite-plugin-dts --dev
# or
pnpm install @spellix/vite-config-package @vitejs/plugin-react-swc typescript vite vite-plugin-dts --D
```


## Usage

Import getViteConfig from the package and configure it as needed:

```javascript
import { getViteConfig } from '@spellix/vite-config-package';

const config = getViteConfig({
  // Your custom configuration options here
});

export default config;
```
npm package: @spellix/vite-internal
Description: This is a vite config for building internal stuff
Latest version: 1.1.0

# @spellix/vite-internal

A Quick description of the utility

> This utility is generated automatically, please add a description and usage instructions below.

## Short description

This is a vite config for building internal stuf

## Installation

```sh
yarn add @spellix/vite-internal
# or
npm i @spellix/vite-internal
# or
pnpm i @spellix/vite-internal
```

## Usage

Import `viteInternal` from the package and configure it with props as needed:

```javascript
import { viteInternal } from '@spellix/vite-internal';

export const App = () => {
  const { /* utility return values */ } = viteInternal({/* utility arguments */});

  return (
    <>
      {/* component */}
    </>
  );
};
```