open-index/open-npm huggingface dataset:
npm package: @luniand-ui/button
Description: Luniand UI | A component to display button in the browser component
Author: Albert Tran
Latest version: 1.0.0

# @luniand-ui/button

A Quick description of the component

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

## Installation

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

## Contribution

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

## License

This project is licensed under the terms of the
[MIT license](https://github.com/luniand/luniand-ui/blob/master/LICENSE).
npm package: @luniand-ui/close-button
Description: Luniand UI | A component to display close-button in the browser component
Author: Albert Tran
Latest version: 1.0.0

# @luniand-ui/close-button

A Quick description of the component

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

## Installation

```sh
yarn add @luniand-ui/close-button
# or
npm i @luniand-ui/close-button
```

## Contribution

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

## License

This project is licensed under the terms of the
[MIT license](https://github.com/luniand/luniand-ui/blob/master/LICENSE).
npm package: @luniand-ui/code
Description: Luniand UI | A component to display code in the browser component
Author: Albert Tran
Latest version: 1.0.0

# @luniand-ui/code

A Quick description of the component

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

## Installation

```sh
yarn add @luniand-ui/code
# or
npm i @luniand-ui/code
```

## Contribution

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

## License

This project is licensed under the terms of the
[MIT license](https://github.com/luniand/luniand-ui/blob/master/LICENSE).
npm package: @luniand-ui/composables
Description: composables
Author: Albert Tran
Latest version: 1.0.0

# @luniand-ui/composables

A Quick description of the component

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

## Installation

```sh
yarn add @luniand-ui/composables
# or
npm i @luniand-ui/composables
```

## Contribution

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

## License

This project is licensed under the terms of the
[MIT license](https://github.com/luniand/luniand-ui/blob/master/LICENSE).
npm package: @luniand-ui/env
Description: env
Author: Albert Tran
Latest version: 1.0.0

# @luniand-ui/env

A Quick description of the component

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

## Installation

```sh
yarn add @luniand-ui/env
# or
npm i @luniand-ui/env
```

## Contribution

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

## License

This project is licensed under the terms of the
[MIT license](https://github.com/luniand/luniand-ui/blob/master/LICENSE).
npm package: @luniand-ui/flex
Description: Luniand UI | Flex component
Author: Albert Tran trantoan.fox.97@gmail.com
Latest version: 1.0.2

# @luniand-ui/u-flex

C flex component
`LFlex` is `LBox` with display: flex and comes with helpful style shorthands.
 
## Installation

```sh
yarn add @luniand-ui/u-flex
# or
npm i @luniand-ui/u-flex
```
npm package: @luniand-ui/focus-lock
Description: Luniand UI | A component to display focus-lock in the browser component
Author: Albert Tran
Latest version: 1.0.0

# @luniand-ui/focus-lock

A Quick description of the component

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

## Installation

```sh
yarn add @luniand-ui/focus-lock
# or
npm i @luniand-ui/focus-lock
```

## Contribution

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

## License

This project is licensed under the terms of the
[MIT license](https://github.com/luniand/luniand-ui/blob/master/LICENSE).
npm package: @luniand-ui/form-control
Description: Luniand UI | A component to display form-control in the browser component
Author: Albert Tran
Latest version: 1.0.0

# @luniand-ui/form-control

A Quick description of the component

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

## Installation

```sh
yarn add @luniand-ui/form-control
# or
npm i @luniand-ui/form-control
```

## Contribution

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

## License

This project is licensed under the terms of the
[MIT license](https://github.com/luniand/luniand-ui/blob/master/LICENSE).
npm package: @luniand-ui/icons
Description: Luniand UI | A component to display icons in the browser component
Author: Albert Tran trantoan.fox.97@gmail.com
Latest version: 0.0.1

# @luniand-ui/u-icon

A component to display icons in the browser

## Installation

```sh
yarn add @luniand-ui/u-icon
# or
npm i @luniand-ui/u-icon
```

### Adding custom icons
All luniand icons are registered in the luniand plugin under the `icons.extend` key. So you
can extend this object to add your own icons. Here are the steps:

- Export the icon's `svg` from Figma, Sketch, etc.
- Use a tool like [SvgOmg](https://svgomg.firebaseapp.com) to reduce the size
  and minify the markup.
- Add the icon to the theme object.

> Add the `fill=currentColor` attribute to the `path` or `g` so that when you
> this `<Icon color="gray.200"/>`, it works correctly.

<br />

```js
// Step 1: Each icon should be stored as an object of `path` and `viewBox`
const customIcons = {
  icon1: {
    path: `<path fill="currentColor" d="..." />`,
    // If the icon's viewBox is `0 0 24 24`, you can ignore `viewBox`
    viewBox: "0 0 40 40",
  },
  icon2: {
    path: `
      <g fill="currentColor">
        <path d="..."/>
      </g>
    `
  }
};

// Step 2: Add the custom icon to the luniand plugin
const app = createApp(App)
  .use(luniandUIVuePlugin, {
    icons: {
      // ...
      extend: customIcons
    }
  })
```

You can now consume your custom icons in your template like this:

```vue
<template>
  <u-icon name="icon1" color="yellow.600" />
  <u-icon name="icon2" color="green.300" />
</template>
```

> You can access the full merged icons object under `this.$luniand.icons` in your Vue components.
npm package: @luniand-ui/image
Description: Luniand UI | A component to display image in the browser component
Author: Albert Tran
Latest version: 1.0.0

# @luniand-ui/image

A Quick description of the component

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

## Installation

```sh
yarn add @luniand-ui/image
# or
npm i @luniand-ui/image
```

## Contribution

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

## License

This project is licensed under the terms of the
[MIT license](https://github.com/luniand/luniand-ui/blob/master/LICENSE).
npm package: @luniand-ui/input
Description: Luniand UI | A component to display input in the browser component
Author: Albert Tran
Latest version: 1.0.0

# @luniand-ui/input

A Quick description of the component

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

## Installation

```sh
yarn add @luniand-ui/input
# or
npm i @luniand-ui/input
```

## Contribution

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

## License

This project is licensed under the terms of the
[MIT license](https://github.com/luniand/luniand-ui/blob/master/LICENSE).
npm package: @luniand-ui/layout
Description: Luniand UI layout components that give you massive speed
Author: Albert Tran
Latest version: 1.0.0

# @luniand-ui/layout

A Quick description of the component

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

## Installation

```sh
yarn add @luniand-ui/layout
# or
npm i @luniand-ui/layout
```

## Contribution

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

## License

This project is licensed under the terms of the
[MIT license](https://github.com/luniand/luniand-ui/blob/master/LICENSE).
npm package: @luniand-ui/media-query
Description: media-query
Author: Albert Tran
Latest version: 1.0.0

# @luniand-ui/media-query

A Quick description of the component

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

## Installation

```sh
yarn add @luniand-ui/media-query
# or
npm i @luniand-ui/media-query
```

## Contribution

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

## License

This project is licensed under the terms of the
[MIT license](https://github.com/luniand/luniand-ui/blob/master/LICENSE).
npm package: @luniand-ui/modal
Description: Luniand UI | A component to display modal in the browser component
Author: Albert Tran
Latest version: 1.0.0

# @luniand-ui/modal

A Quick description of the component

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

## Installation

```sh
yarn add @luniand-ui/modal
# or
npm i @luniand-ui/modal
```

## Contribution

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

## License

This project is licensed under the terms of the
[MIT license](https://github.com/luniand/luniand-ui/blob/master/LICENSE).
npm package: @luniand-ui/motion
Description: Luniand UI | A component to display motion in the browser component
Author: Albert Tran
Latest version: 1.0.0

# @luniand-ui/motion

A Quick description of the component

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

## Installation

```sh
yarn add @luniand-ui/motion
# or
npm i @luniand-ui/motion
```

## Contribution

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

## License

This project is licensed under the terms of the
[MIT license](https://github.com/luniand/luniand-ui/blob/master/LICENSE).
npm package: @luniand-ui/number-utils
Description: Number functions utils
Author: Albert Tran
Latest version: 1.0.0

# @luniand-ui/number-utils

A Quick description of the component

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

## Installation

```sh
yarn add @luniand-ui/number-utils
# or
npm i @luniand-ui/number-utils
```

## Contribution

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

## License

This project is licensed under the terms of the
[MIT license](https://github.com/luniand/luniand-ui/blob/master/LICENSE).
npm package: @luniand-ui/pin-input
Description: Luniand UI | A component to display pin-input in the browser component
Author: Albert Tran
Latest version: 1.0.0

# @luniand-ui/pin-input

A Quick description of the component

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

## Installation

```sh
yarn add @luniand-ui/pin-input
# or
npm i @luniand-ui/pin-input
```

## Contribution

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

## License

This project is licensed under the terms of the
[MIT license](https://github.com/luniand/luniand-ui/blob/master/LICENSE).
npm package: @luniand-ui/popper
Description: Luniand UI | A component to display popper in the browser component
Author: Albert Tran
Latest version: 1.0.0

# @luniand-ui/popper

A Quick description of the component

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

## Installation

```sh
yarn add @luniand-ui/popper
# or
npm i @luniand-ui/popper
```

## Contribution

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

## License

This project is licensed under the terms of the
[MIT license](https://github.com/luniand/luniand-ui/blob/master/LICENSE).
npm package: @luniand-ui/portal
Description: Luniand UI | A component to display portal in the browser component
Author: Albert Tran
Latest version: 1.0.0

# @luniand-ui/portal

A Quick description of the component

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

## Installation

```sh
yarn add @luniand-ui/portal
# or
npm i @luniand-ui/portal
```

## Contribution

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

## License

This project is licensed under the terms of the
[MIT license](https://github.com/luniand/luniand-ui/blob/master/LICENSE).
npm package: @luniand-ui/reset
Description: Luniand UI | Global styles reset component
Author: Albert Tran trantoan.fox.97@gmail.com
Latest version: 1.0.2

# @luniand-ui/u-reset

luniand ui vue s global styles reset component

## Installation

```sh
yarn add @luniand-ui/u-reset
# or
npm i @luniand-ui/u-reset
```
npm package: @luniand-ui/skeleton
Description: Luniand UI | A component to display skeleton in the browser component
Author: Albert Tran
Latest version: 1.0.0

# @luniand-ui/skeleton

A Quick description of the component

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

## Installation

```sh
yarn add @luniand-ui/skeleton
# or
npm i @luniand-ui/skeleton
```

## Contribution

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

## License

This project is licensed under the terms of the
[MIT license](https://github.com/luniand/luniand-ui/blob/master/LICENSE).
npm package: @luniand-ui/skip-nav
Description: Luniand UI | A component to display skip-nav in the browser component
Author: Albert Tran
Latest version: 1.0.0

# @luniand-ui/skip-nav

A Quick description of the component

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

## Installation

```sh
yarn add @luniand-ui/skip-nav
# or
npm i @luniand-ui/skip-nav
```

## Contribution

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

## License

This project is licensed under the terms of the
[MIT license](https://github.com/luniand/luniand-ui/blob/master/LICENSE).
npm package: @luniand-ui/spinner
Description: Luniand UI | A component to display spinner in the browser component
Author: Albert Tran
Latest version: 1.0.0

# @luniand-ui/spinner

A Quick description of the component

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

## Installation

```sh
yarn add @luniand-ui/spinner
# or
npm i @luniand-ui/spinner
```

## Contribution

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

## License

This project is licensed under the terms of the
[MIT license](https://github.com/luniand/luniand-ui/blob/master/LICENSE).
npm package: @luniand-ui/storybook-addon
Description: The official Storybook Addon for Luniand UI
Author: Albert Tran
Latest version: 0.0.1

# @luniand-ui/storybook-addon

Use Luniand UI in your Storybook stories.

This Plugin wraps each of your stories with [`LuniandProvider`][luniandprovider]
which can be configured using Storybook parameters.

## Installation

### yarn

```sh
yarn add -D @luniand-ui/storybook-addon
```

### npm

```sh
npm i -D @luniand-ui/storybook-addon
```

Add the addon to your configuration in `.storybook/main.js` and disable the
emotion alias (available with Storybook >6.4).

```js
module.exports = {
  addons: ["@luniand-ui/storybook-addon"],
  features: {
    emotionAlias: false,
  },
}
```

## Configuring `LuniandProvider`

If you need to customize the props passed to `LuniandProvider` for your stories
(to use a custom `theme`, for example), you'll need to create custom Storybook
parameters.

To set global parameters for this addon, add a `luniand` object to the
`parameters` export in `.storybook/preview.js`:

```js
import myTheme from "../theme"

export const parameters = {
  luniand: {
    theme: myTheme,
  },
}
```

The `luniand` parameters take the same shape as the `props` for `LuniandProvider`.
[See the `LuniandProvider` props table][luniandprovider] to see the list of
possible parameters.

### Overriding `LuniandProvider` configuration for individual components or stories

Storybook allows you to define parameters at multiple levels: global, component,
and story. We recommend setting default parameters at the global level, and
overriding them at the component or story when necessary. See the
[Storybook Parameters documentation](https://storybook.js.org/docs/react/writing-stories/parameters)
for more information.

## Color Mode Tool

You will be able to toggle your color mode with the button in the toolbar. It
tries to sync with your theme through the localstorage key.

## Story Controls for Theme Components

Get controls for the theming props `variant`, `size` and `colorScheme` in your
stories with `getThemingArgTypes(theme, componentName)`.

```tsx
import { Meta, StoryFn } from "@storybook/react"
import { getThemingArgTypes } from "@luniand-ui/storybook-addon"
import { theme } from "<your-theme>"

export default {
  title: "Components / Forms / Button",
  // get controls for `variant`, `size` and `colorScheme`
  argTypes: getThemingArgTypes(theme, "Button"),
} as Meta

interface StoryProps extends ThemingProps<"Button"> {}

export const Basic: StoryFn<StoryProps> = (props) => (
  <Button {...props}>Button</Button>
)
```

This will render input fields to choose the theming prop values:

![Storybook screenshot with controls tab](theming-arg-types.png)

[luniandprovider]:
  https://luniand-ui.com/docs/getting-started#luniandprovider-props
npm package: @luniand-ui/tag
Description: Luniand UI | A component to display tag in the browser component
Author: Albert Tran
Latest version: 1.0.0

# @luniand-ui/tag

A Quick description of the component

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

## Installation

```sh
yarn add @luniand-ui/tag
# or
npm i @luniand-ui/tag
```

## Contribution

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

## License

This project is licensed under the terms of the
[MIT license](https://github.com/luniand/luniand-ui/blob/master/LICENSE).
npm package: @luniand-ui/textarea
Description: Luniand UI | A component to display textarea in the browser component
Author: Albert Tran
Latest version: 1.0.0

# @luniand-ui/textarea

A Quick description of the component

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

## Installation

```sh
yarn add @luniand-ui/textarea
# or
npm i @luniand-ui/textarea
```

## Contribution

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

## License

This project is licensed under the terms of the
[MIT license](https://github.com/luniand/luniand-ui/blob/master/LICENSE).
npm package: @luniand-ui/visually-hidden
Description: Luniand UI | A component to visually-hidden button in the browser component
Author: Albert Tran
Latest version: 1.0.0

# @luniand-ui/visually-hidden

A Quick description of the component

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

## Installation

```sh
yarn add @luniand-ui/visually-hidden
# or
npm i @luniand-ui/visually-hidden
```

## Contribution

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

## License

This project is licensed under the terms of the
[MIT license](https://github.com/luniand/luniand-ui/blob/master/LICENSE).
npm package: @luniand-ui/vue
Description: Vue 3 compatible version of Luniand UI
Author: Albert Tran trantoan.fox.97@gmail.com
Latest version: 1.0.2

## Project Stats
![Alt](https://repobeats.axiom.co/api/embed/40b60a8e21b08d97af5849ea7a8c7d7f46956824.svg "Repobeats analytics image")
npm package: @luniand-ui/vue-a11y
Description: Luniand Vue | Accessibility composables for luniand ui vue component
Author: Albert Tran
Latest version: 1.0.0

# @luniand-ui/vue-a11y

A Quick description of the component

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

## Installation

```sh
yarn add @luniand-ui/vue-a11y
# or
npm i @luniand-ui/vue-a11y
```

## Contribution

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

## License

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