open-index/open-npm huggingface dataset:
npm package: @nexus-ds/accordion
Description: Collapse display a list of high-level options that can expand/collapse to reveal more information.
Latest version: 1.1.0

# @nexus-ds/accordion

Accordion display a list of high-level options that can expand/collapse to reveal more information.


## Installation

```sh
yarn add @nexus-ds/accordion
# or
npm i @nexus-ds/accordion
```



## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/NexusDesignSystem/nexus-ds/blob/main/LICENSE).
npm package: @nexus-ds/aria-utils
Description: A package for managing @react-aria NexusUI utils.
Latest version: 1.1.0

# @nexus-ds/aria-utils

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @nexus-ds/aria-utils
# or
npm i @nexus-ds/aria-utils
```



## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/NexusDesignSystem/nexus-ds/blob/main/LICENSE).
npm package: @nexus-ds/avatar
Description: The Avatar component is used to represent a user, and displays the profile picture, initials or fallback icon.
Latest version: 1.1.0

# @nexus-ds/avatar

The Avatar component is used to represent a user, and displays the profile picture, initials or fallback icon.

avatar

## Installation

```sh
yarn add @nexus-ds/avatar
# or
npm i @nexus-ds/avatar
```



## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/NexusDesignSystem/nexus-ds/blob/main/LICENSE).
npm package: @nexus-ds/badge
Description: Badges are used as a small numerical value or status descriptor for UI elements.
Latest version: 1.1.0

# @nexus-ds/badge

Badges are used as a small numerical value or status descriptor for UI elements.



## Installation

```sh
yarn add @nexus-ds/badge
# or
npm i @nexus-ds/badge
```



## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/NexusDesignSystem/nexus-ds/blob/main/LICENSE).
npm package: @nexus-ds/button
Description: Buttons allow users to perform actions and choose with a single tap.
Latest version: 1.1.0

# @nexus-ds/button

Buttons allow users to perform actions and choose with a single tap.

button

## Installation

```sh
yarn add @nexus-ds/button
# or
npm i @nexus-ds/button
```



## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/NexusDesignSystem/nexus-ds/blob/main/LICENSE).
npm package: @nexus-ds/card
Description: Card is a container for text, photos, and actions in the context of a single subject.
Latest version: 1.1.0

# @nexus-ds/card

Card is a container for text, photos, and actions in the context of a single subject.

card

## Installation

```sh
yarn add @nexus-ds/card
# or
npm i @nexus-ds/card
```



## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/NexusDesignSystem/nexus-ds/blob/main/LICENSE).
npm package: @nexus-ds/checkbox
Description: Checkboxes allow users to select multiple items from a list of individual items, or to mark one individual item as selected.
Latest version: 1.1.0

# @nexus-ds/checkbox

Checkboxes allow users to select multiple items from a list of individual items, or to mark one individual item as selected.

checkbox

## Installation

```sh
yarn add @nexus-ds/checkbox
# or
npm i @nexus-ds/checkbox
```



## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/NexusDesignSystem/nexus-ds/blob/main/LICENSE).
npm package: @nexus-ds/chip
Description: Chips help people enter information, make selections, filter content, or trigger actions.
Latest version: 1.1.0

# @nexus-ds/chip

A Chip is a small block of essential information that represent an input, attribute, or action.

chip

## Installation

```sh
yarn add @nexus-ds/chip
# or
npm i @nexus-ds/chip
```



## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/NexusDesignSystem/nexus-ds/blob/main/LICENSE).
npm package: @nexus-ds/code
Description: Code is a component used to display inline code.
Latest version: 1.1.0

# @nexus-ds/code

Code is a component used to display inline code.

code

## Installation

```sh
yarn add @nexus-ds/code
# or
npm i @nexus-ds/code
```



## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/NexusDesignSystem/nexus-ds/blob/main/LICENSE).
npm package: @nexus-ds/divider
Description: . A separator is a visual divider between two groups of content
Latest version: 1.1.0

# @nexus-ds/divider

Divider is a component that separates content in a page.

divider

## Installation

```sh
yarn add @nexus-ds/divider
# or
npm i @nexus-ds/divider
```



## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/NexusDesignSystem/nexus-ds/blob/main/LICENSE).
npm package: @nexus-ds/dropdown
Description: A dropdown displays a list of actions or options that a user can choose.
Latest version: 1.1.0

# @nexus-ds/dropdown

Displays a list of actions or options that a user can choose.

dropdown

## Installation

```sh
yarn add @nexus-ds/dropdown
# or
npm i @nexus-ds/dropdown
```



## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/NexusDesignSystem/nexus-ds/blob/main/LICENSE).
npm package: @nexus-ds/framer-transitions
Description: A set of framer motion transitions for react
Latest version: 1.1.0

# @nexus-ds/framer-transitions

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @nexus-ds/framer-transitions
# or
npm i @nexus-ds/framer-transitions
```



## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/NexusDesignSystem/nexus-ds/blob/main/LICENSE).
npm package: @nexus-ds/image
Description: A simple image component
Latest version: 1.1.0

# @nexus-ds/image

The Image component is used to display images with support for fallback.

image

## Installation

```sh
yarn add @nexus-ds/image
# or
npm i @nexus-ds/image
```



## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/NexusDesignSystem/nexus-ds/blob/main/LICENSE).
npm package: @nexus-ds/input
Description: The input component is designed for capturing user input within a text field.
Latest version: 1.1.0

# @nexus-ds/input

Input is a component that allows users to enter text. It can be used to get user inputs in forms, search fields, and more.

This package contains the Input component and the TextArea component.

input

## Installation

```sh
yarn add @nexus-ds/input
# or
npm i @nexus-ds/input
```



## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/NexusDesignSystem/nexus-ds/blob/main/LICENSE).
npm package: @nexus-ds/kbd
Description: The keyboard key components indicates which key or set of keys used to execute a specificv  action
Latest version: 1.1.0

# @nexus-ds/kbd

Keyboard key or kbd is a component to display which key or combination of keys performs a given action.

kbd

## Installation

```sh
yarn add @nexus-ds/kbd
# or
npm i @nexus-ds/kbd
```



## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/NexusDesignSystem/nexus-ds/blob/main/LICENSE).
npm package: @nexus-ds/link
Description: Links allow users to click their way from page to page. This component is styled to resemble a hyperlink and semantically renders an &lt;a&gt;
Latest version: 1.1.0

# @nexus-ds/link

Links allow users to click their way from page to page. This component is styled to resemble a hyperlink and semantically renders an `<a>` tag.

link

## Installation

```sh
yarn add @nexus-ds/link
# or
npm i @nexus-ds/link
```



## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/NexusDesignSystem/nexus-ds/blob/main/LICENSE).
npm package: @nexus-ds/listbox
Description: A listbox displays a list of options and allows a user to select one or more of them.
Latest version: 1.1.0

# @nexus-ds/listbox

A listbox displays a list of options and allows a user to select one or more of them.

listbox

## Installation

```sh
yarn add @nexus-ds/listbox
# or
npm i @nexus-ds/listbox
```



## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/NexusDesignSystem/nexus-ds/blob/main/LICENSE).
npm package: @nexus-ds/menu
Description: A menu displays a list of options and allows a user to select one or more of them.
Latest version: 1.1.0

# @nexus-ds/menu

A menu displays a list of options and allows a user to select one or more of them.

menu

## Installation

```sh
yarn add @nexus-ds/menu
# or
npm i @nexus-ds/menu
```



## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/NexusDesignSystem/nexus-ds/blob/main/LICENSE).
npm package: @nexus-ds/modal
Description: Displays a dialog with a custom content that requires attention or provides additional information.
Latest version: 1.1.0

# @nexus-ds/modal

Displays a dialog with a custom content that requires attention or provides additional information.

modal

## Installation

```sh
yarn add @nexus-ds/modal
# or
npm i @nexus-ds/modal
```



## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/NexusDesignSystem/nexus-ds/blob/main/LICENSE).
npm package: @nexus-ds/navbar
Description: A responsive navigation header positioned on top side of your page that includes support for branding, links, navigation, collapse and more.
Latest version: 1.1.0

# @nexus-ds/navbar

A responsive navigation header positioned on top side of your page that includes support for branding, links, navigation, collapse menu and more.

navbar

## Installation

```sh
yarn add @nexus-ds/navbar
# or
npm i @nexus-ds/navbar
```



## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/NexusDesignSystem/nexus-ds/blob/main/LICENSE).
npm package: @nexus-ds/pagination
Description: The Pagination component allows you to display active page and navigate between multiple pages.
Latest version: 1.1.0

# @nexus-ds/pagination

The Pagination component allows you to display active page and navigate between multiple pages.

pagination

## Installation

```sh
yarn add @nexus-ds/pagination
# or
npm i @nexus-ds/pagination
```



## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/NexusDesignSystem/nexus-ds/blob/main/LICENSE).
npm package: @nexus-ds/popover
Description: A popover is an overlay element positioned relative to a trigger.
Latest version: 1.1.0

# @nexus-ds/popover

Popover is a non-modal dialog that floats around its disclosure. It's commonly used for displaying additional rich content on top of something.

popover

## Installation

```sh
yarn add @nexus-ds/popover
# or
npm i @nexus-ds/popover
```



## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/NexusDesignSystem/nexus-ds/blob/main/LICENSE).
npm package: @nexus-ds/progress
Description: Progress bars show either determinate or indeterminate progress of an operation over time.
Latest version: 1.1.0

# @nexus-ds/progress

The Progress component allows you to view the progress of any activity.

progress

## Installation

```sh
yarn add @nexus-ds/progress
# or
npm i @nexus-ds/progress
```



## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/NexusDesignSystem/nexus-ds/blob/main/LICENSE).
npm package: @nexus-ds/radio
Description: Radios allow users to select a single option from a list of mutually exclusive options.
Latest version: 1.1.0

# @nexus-ds/radio

Radio Group allow users to select a single option from a list of mutually exclusive options.

radio-group

## Installation

```sh
yarn add @nexus-ds/radio
# or
npm i @nexus-ds/radio
```



## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/NexusDesignSystem/nexus-ds/blob/main/LICENSE).
npm package: @nexus-ds/react-rsc-utils
Description: A set of utilities for react compatible with RSC
Latest version: 1.1.0

# @nexus-ds/react-rsc-utils

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @nexus-ds/react-rsc-utils
# or
npm i @nexus-ds/react-rsc-utils
```



## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/NexusDesignSystem/nexus-ds/blob/main/LICENSE).
npm package: @nexus-ds/react-utils
Description: A set of utilities for react on client side
Latest version: 1.1.0

# @nexus-ds/react-utils

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @nexus-ds/react-utils
# or
npm i @nexus-ds/react-utils
```



## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/NexusDesignSystem/nexus-ds/blob/main/LICENSE).
npm package: @nexus-ds/ripple
Description: A simple implementation to display a ripple animation when the source component is clicked
Latest version: 1.1.0

# @nexus-ds/ripple

This is a component that creates a ripple effect on the screen.

button

## Installation

```sh
yarn add @nexus-ds/ripple
# or
npm i @nexus-ds/ripple
```



## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/NexusDesignSystem/nexus-ds/blob/main/LICENSE).
npm package: @nexus-ds/scroll-shadow
Description: A component that applies top and bottom shadows when content overflows on scroll.
Latest version: 1.1.0

# @nexus-ds/scroll-shadow

A component that applies top and bottom shadows when content overflows on scroll.

listbox

## Installation

```sh
yarn add @nexus-ds/scroll-shadow
# or
npm i @nexus-ds/scroll-shadow
```



## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/NexusDesignSystem/nexus-ds/blob/main/LICENSE).
npm package: @nexus-ds/select
Description: A select displays a collapsible list of options and allows a user to select one of them.
Latest version: 1.1.0

# @nexus-ds/select

A select displays a collapsible list of options and allows a user to select one of them.

select

## Installation

```sh
yarn add @nexus-ds/select
# or
npm i @nexus-ds/select
```



## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/NexusDesignSystem/nexus-ds/blob/main/LICENSE).
npm package: @nexus-ds/shared-icons
Description: Internal icons set, commonly used in the components stories
Latest version: 1.1.0

# @nexus-ds/shared-icons

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @nexus-ds/shared-icons
# or
npm i @nexus-ds/shared-icons
```



## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/NexusDesignSystem/nexus-ds/blob/main/LICENSE).
npm package: @nexus-ds/shared-utils
Description: A set of NexusUI utilities
Latest version: 1.1.0

# @nexus-ds/system

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @nexus-ds/system
# or
npm i @nexus-ds/system
```



## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/NexusDesignSystem/nexus-ds/blob/main/LICENSE).
npm package: @nexus-ds/skeleton
Description: Skeleton is used to display the loading state of some component.
Latest version: 1.1.0

# @nexus-ds/skeleton

Skeleton is a placeholder to show a loading state and the expected shape of a component.

skeleton

## Installation

```sh
yarn add @nexus-ds/skeleton
# or
npm i @nexus-ds/skeleton
```



## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/NexusDesignSystem/nexus-ds/blob/main/LICENSE).
npm package: @nexus-ds/snippet
Description: Display a snippet of copyable code for the command line.
Latest version: 1.1.0

# @nexus-ds/snippet

Snippet is a component that can be used to display inline or multiline code snippets.

snippet

## Installation

```sh
yarn add @nexus-ds/snippet
# or
npm i @nexus-ds/snippet
```



## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/NexusDesignSystem/nexus-ds/blob/main/LICENSE).
npm package: @nexus-ds/spacer
Description: A flexible spacer component designed to create consistent spacing and maintain alignment in your layout.
Latest version: 1.1.0

# @nexus-ds/spacer

Spacer is a component used to add space between components.

spacer

## Installation

```sh
yarn add @nexus-ds/spacer
# or
npm i @nexus-ds/spacer
```



## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/NexusDesignSystem/nexus-ds/blob/main/LICENSE).
npm package: @nexus-ds/spinner
Description: Loaders express an unspecified wait time or display the length of a process.
Latest version: 1.1.0

# @nexus-ds/loading

Spinner express an unspecified wait time or display the length of a process.

loading

## Installation

```sh
yarn add @nexus-ds/loading
# or
npm i @nexus-ds/loading
```



## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/NexusDesignSystem/nexus-ds/blob/main/LICENSE).
npm package: @nexus-ds/switch
Description: A switch is similar to a checkbox, but represents on/off values as opposed to selection.
Latest version: 1.1.0

# @nexus-ds/switch

The Switch component is used as an alternative between checked and not checked states.

switch

## Installation

```sh
yarn add @nexus-ds/switch
# or
npm i @nexus-ds/switch
```



## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/NexusDesignSystem/nexus-ds/blob/main/LICENSE).
npm package: @nexus-ds/system
Description: nexusui system primitives
Latest version: 1.1.0

# @nexus-ds/system

Nexus DS system primitives, here you can find the `extendVariants` utility, `Nexus DSProvider` and some other utilities.


## Installation

```sh
yarn add @nexus-ds/system
# or
npm i @nexus-ds/system
```



## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/NexusDesignSystem/nexus-ds/blob/main/LICENSE).
npm package: @nexus-ds/system-rsc
Description: nexusui system primitives compatibles with RSC imports
Latest version: 1.1.0

# @nexus-ds/system-rsc

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @nexus-ds/system-rsc
# or
npm i @nexus-ds/system-rsc
```



## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/NexusDesignSystem/nexus-ds/blob/main/LICENSE).
npm package: @nexus-ds/table
Description: Tables are used to display tabular data using rows and columns. 
Latest version: 1.1.0

# @nexus-ds/table

Tables are used to display tabular data using rows and columns. They allow users to quickly scan, sort, compare, and take action on large amounts of data.

table

## Installation

```sh
yarn add @nexus-ds/table
# or
npm i @nexus-ds/table
```



## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/NexusDesignSystem/nexus-ds/blob/main/LICENSE).
npm package: @nexus-ds/tabs
Description: Tabs organize content into multiple sections and allow users to navigate between them.
Latest version: 1.1.0

# @nexus-ds/tabs

Tabs organize content into multiple sections and allow users to navigate between them.

tabs

## Installation

```sh
yarn add @nexus-ds/tabs
# or
npm i @nexus-ds/tabs
```



## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/NexusDesignSystem/nexus-ds/blob/main/LICENSE).
npm package: @nexus-ds/test-utils
Description: A set of utilities for react testing
Latest version: 1.1.0

# @nexus-ds/test-utils

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @nexus-ds/test-utils
# or
npm i @nexus-ds/test-utils
```



## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/NexusDesignSystem/nexus-ds/blob/main/LICENSE).
npm package: @nexus-ds/theme
Description: The default theme for nexusui components
Latest version: 1.1.0

# @nexus-ds/theme

Nexus DS theme primitives, here you can find the TailwindCSS `plugin`, `colors`, `layout`, `spacing`, `typography` and some other utilities.

## Installation

```sh
yarn add @nexus-ds/theme
# or
npm i @nexus-ds/theme
```



## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/NexusDesignSystem/nexus-ds/blob/main/LICENSE).
npm package: @nexus-ds/tooltip
Description: A React Component for rendering dynamically positioned Tooltips
Latest version: 1.1.0

# @nexus-ds/tooltip

Tooltips display a brief, informative message that appears when a user interacts with an element.

tooltip

## Installation

```sh
yarn add @nexus-ds/tooltip
# or
npm i @nexus-ds/tooltip
```



## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/NexusDesignSystem/nexus-ds/blob/main/LICENSE).
npm package: @nexus-ds/use-aria-accordion
Description: React-aria useAccordion hooks with custom implementations
Latest version: 1.1.0

# @nexus-ds/use-aria-accordion

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @nexus-ds/use-aria-accordion
# or
npm i @nexus-ds/use-aria-accordion
```



## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/NexusDesignSystem/nexus-ds/blob/main/LICENSE).
npm package: @nexus-ds/use-aria-accordion-item
Description: Internal impl for react aria accordion item
Latest version: 1.1.0

# @nexus-ds/use-aria-accordion-item

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @nexus-ds/use-aria-accordion-item
# or
npm i @nexus-ds/use-aria-accordion-item
```



## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/NexusDesignSystem/nexus-ds/blob/main/LICENSE).
npm package: @nexus-ds/use-aria-button
Description: Internal hook to handle button a11y and events, this is based on react-aria button hook but without the onClick warning
Latest version: 1.1.0

# @nexus-ds/use-aria-button

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @nexus-ds/use-aria-button
# or
npm i @nexus-ds/use-aria-button
```



## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/NexusDesignSystem/nexus-ds/blob/main/LICENSE).
npm package: @nexus-ds/use-aria-link
Description: Internal hook to handle link a11y and events, this is based on react-aria link hook but without the onClick warning
Latest version: 1.1.0

# @nexus-ds/use-aria-link

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @nexus-ds/use-aria-link
# or
npm i @nexus-ds/use-aria-link
```



## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/NexusDesignSystem/nexus-ds/blob/main/LICENSE).
npm package: @nexus-ds/use-aria-modal-overlay
Description: A custom implementation of react aria modal overlay, this removes the prevent scroll
Latest version: 1.1.0

# @nexus-ds/use-aria-modal-overlay

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @nexus-ds/use-aria-modal-overlay
# or
npm i @nexus-ds/use-aria-modal-overlay
```



## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/NexusDesignSystem/nexus-ds/blob/main/LICENSE).
npm package: @nexus-ds/use-aria-multiselect
Description: Provides the behavior and accessibility implementation for a multi-select component.
Latest version: 1.1.0

# @nexus-ds/use-aria-multiselect

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @nexus-ds/use-aria-multiselect
# or
npm i @nexus-ds/use-aria-multiselect
```



## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/NexusDesignSystem/nexus-ds/blob/main/LICENSE).
npm package: @nexus-ds/use-aria-toggle-button
Description: Internal hook to handle button a11y and events, this is based on react-aria button hook but without the onClick warning
Latest version: 1.1.0

# @nexus-ds/use-aria-toggle-button

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @nexus-ds/use-aria-toggle-button
# or
npm i @nexus-ds/use-aria-toggle-button
```



## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/NexusDesignSystem/nexus-ds/blob/main/LICENSE).
npm package: @nexus-ds/use-callback-ref
Description: React hook to persist any value between renders, but keeps it up-to-date if it changes.
Latest version: 1.1.0

# @nexus-ds/use-callback-ref

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @nexus-ds/use-callback-ref
# or
npm i @nexus-ds/use-callback-ref
```



## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/NexusDesignSystem/nexus-ds/blob/main/LICENSE).
npm package: @nexus-ds/use-clipboard
Description: Wrapper around navigator.clipboard with feedback timeout
Latest version: 1.1.0

# @nexus-ds/use-clipboard

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @nexus-ds/use-clipboard
# or
npm i @nexus-ds/use-clipboard
```



## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/NexusDesignSystem/nexus-ds/blob/main/LICENSE).
npm package: @nexus-ds/use-data-scroll-overflow
Description: A hook to add data attributes when the element has top or bottom scroll.
Latest version: 1.1.0

# @nexus-ds/use-data-scroll-overflow

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @nexus-ds/use-data-scroll-overflow
# or
npm i @nexus-ds/use-data-scroll-overflow
```



## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/NexusDesignSystem/nexus-ds/blob/main/LICENSE).
npm package: @nexus-ds/use-disclosure
Description: The hook in charge of managing modals
Latest version: 1.1.0

# @nexus-ds/use-disclosure

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @nexus-ds/use-disclosure
# or
npm i @nexus-ds/use-disclosure
```



## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/NexusDesignSystem/nexus-ds/blob/main/LICENSE).
npm package: @nexus-ds/use-image
Description: React hook for progressing image loading
Latest version: 1.1.0

# @nexus-ds/use-image

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @nexus-ds/use-image
# or
npm i @nexus-ds/use-image
```



## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/NexusDesignSystem/nexus-ds/blob/main/LICENSE).
npm package: @nexus-ds/use-infinite-scroll
Description: A hook for handling infinite scroll based on the IntersectionObserver API
Latest version: 1.1.0

# @nexus-ds/use-infinite-scroll

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @nexus-ds/use-infinite-scroll
# or
npm i @nexus-ds/use-infinite-scroll
```



## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/NexusDesignSystem/nexus-ds/blob/main/LICENSE).
npm package: @nexus-ds/use-is-mobile
Description: A hook that returns whether the device is mobile or not
Latest version: 1.1.0

# @nexus-ds/use-is-mobile

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @nexus-ds/use-is-mobile
# or
npm i @nexus-ds/use-is-mobile
```



## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/NexusDesignSystem/nexus-ds/blob/main/LICENSE).
npm package: @nexus-ds/use-is-mounted
Description: This hook can be used to render client-based components or run client logic
Latest version: 1.1.0

# @nexus-ds/use-is-mounted

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @nexus-ds/use-is-mounted
# or
npm i @nexus-ds/use-is-mounted
```



## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/NexusDesignSystem/nexus-ds/blob/main/LICENSE).
npm package: @nexus-ds/use-pagination
Description: State management hook for Pagination component, it lets you manage pagination with controlled and uncontrolled state
Latest version: 1.1.0

# @nexus-ds/use-pagination

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @nexus-ds/use-pagination
# or
npm i @nexus-ds/use-pagination
```



## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/NexusDesignSystem/nexus-ds/blob/main/LICENSE).
npm package: @nexus-ds/use-real-shape
Description: Hook that returns the real dimensions of an element
Latest version: 1.1.0

# @nexus-ds/use-real-shape

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @nexus-ds/use-real-shape
# or
npm i @nexus-ds/use-real-shape
```



## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/NexusDesignSystem/nexus-ds/blob/main/LICENSE).
npm package: @nexus-ds/use-ref-state
Description: Hook for saving the state in a ref value
Latest version: 1.1.0

# @nexus-ds/use-ref-state

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @nexus-ds/use-ref-state
# or
npm i @nexus-ds/use-ref-state
```



## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/NexusDesignSystem/nexus-ds/blob/main/LICENSE).
npm package: @nexus-ds/use-resize
Description: Hook that adds an event listener to the resize window event
Latest version: 1.1.0

# @nexus-ds/use-resize

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @nexus-ds/use-resize
# or
npm i @nexus-ds/use-resize
```



## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/NexusDesignSystem/nexus-ds/blob/main/LICENSE).
npm package: @nexus-ds/use-safe-layout-effect
Description: A Quick description of the component
Latest version: 1.1.0

# @nexus-ds/use-safe-layout-effect

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @nexus-ds/use-safe-layout-effect
# or
npm i @nexus-ds/use-safe-layout-effect
```



## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/NexusDesignSystem/nexus-ds/blob/main/LICENSE).
npm package: @nexus-ds/use-scroll-position
Description: Provides the logic to control the scroll over an element
Latest version: 1.1.0

# @nexus-ds/use-scroll-position

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @nexus-ds/use-scroll-position
# or
npm i @nexus-ds/use-scroll-position
```



## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/NexusDesignSystem/nexus-ds/blob/main/LICENSE).
npm package: @nexus-ds/use-ssr
Description: A Quick description of the component
Latest version: 1.1.0

# @nexus-ds/use-ssr

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @nexus-ds/use-ssr
# or
npm i @nexus-ds/use-ssr
```



## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/NexusDesignSystem/nexus-ds/blob/main/LICENSE).
npm package: @nexus-ds/use-update-effect
Description: React effect hook that invokes only on update
Latest version: 1.1.0

# @nexus-ds/use-update-effect

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @nexus-ds/use-update-effect
# or
npm i @nexus-ds/use-update-effect
```



## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/NexusDesignSystem/nexus-ds/blob/main/LICENSE).
npm package: @nexus-ds/user
Description: Flexible User Profile Component.
Latest version: 1.1.0

# @nexus-ds/user

Display user information with avatar and name.

user

## Installation

```sh
yarn add @nexus-ds/user
# or
npm i @nexus-ds/user
```



## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/NexusDesignSystem/nexus-ds/blob/main/LICENSE).
npm package: @nexus-edge/design-tokens
Description: > Design tokens for the Nexus Edge Design System
Latest version: 1.0.8

# 🎨 Nexus Edge Design Tokens

> Design tokens for the Nexus Edge Design System

## 💬 Why design tokens?

The @nexus-edge/design-tokens package serves as a central repository for all design and styling-related information. It contains style variables that are essential for maintaining consistency across your project's UI.

## 📁 Contents of the tokens package

- Breakpoints
  - Includes tokens for all the breakpoints for adapting the UI to different devices.
- Spacing
  - Contains tokens for managing spacing, including:
    - Padding
    - Margin
    - Gap
- Typography
  - Contains tokens for managing typography, including:
    - font weight
    - font size
    - line height
    - letter spacing
- Mixins
  - Provides reusable code snippets for common design patterns.
- Colors
  - Specified colors following the Nexus Edge design system
    - Primary, secondary and tertiary colors
    - Success, error and warning colors
    - State-dependent colors such as disabled and hover

## 🔨 Usage

To leverage the variables in this package, you need to import them into a SCSS file. This allows you to apply consistent styling across your components efficiently. To use a mixin, make sure to use the _@include_ keyword as shown in the example below.

Example: `SCSS`` File Usage

```
@use '@nexus-edge/design-tokens' as tokens;

body {
    background-color: tokens.$color-bg-primary;
}

h1 {
     @include tokens.$neds-body-lg
}
```
npm package: @nexus-edge/ui
Description: > React components for Nexus Edge Design System (@neds)
Latest version: 0.2.1

# Nexus Edge UI package

> React components for Nexus Edge Design System (@neds)

## 📚 Description

This library was created for the Nexus Edge Design System and contains reusable React components. The components are carefully built and adhere to best practices for semantic HTML.

## ⌨️ Components

We provide 3 different components that are accessible tested and reusable. Additionally, we offer a collection of icons for use.

| Component | Description                                                                                                                            | Default   | Options                                        |
| --------- | -------------------------------------------------------------------------------------------------------------------------------------- | --------- | ---------------------------------------------- |
| Button    | Our button is able to become an `a` tag if href attribute is passed to it                                                              | Button    | Button or Anchor                               |
| TextField | The TextField is a flexible component that can either be text input, email input, phone input, or Textarea based on the chosen variant | Textinput | TextInput, PhoneInput, EmailInput, or Textarea |
| Badge     | The Badge component visually indicates dynamic content, status, or information, with variants chosen by the 'variant' prop.            | -         | Variant: success, warning, error               |

## 🛠️ Installation & Usage

To install our package run the following command in the terminal:

```bash
npm install @nexus-edge/ui
```

### Import CSS

```scss
@import '@nexus-edge/ui/dist/index.css';
```

### Import component

- Button & Anchor

```ts
import { Button } from '@nexus-edge/ui'

<Button variant="primary">Text</Button>
```

- TextField

```ts
import { TextField } from '@nexus-edge/ui'

<TextField label="label" variant="text"/>

```

- Badge

```ts
import { Badge } from '@nexus-edge/ui'

<Badge variant="success">I am successful</Badge>

```

- Icon

```ts
import { IconAlertCircle } from '@nexus-edge/ui'

 <IconAlertCircle title="title" />

```