open-index/open-npm huggingface dataset:
npm package: @recykal/ui
Description: Recykal UI Library - A comprehensive React component library built with Radix UI and Tailwind CSS
Author: Recykal Team
Latest version: 0.2.1

# @recykal/ui

A comprehensive React component library built with Radix UI and Tailwind CSS, designed for fast development, easy maintenance, and accessibility.

## 📚 Documentation

All documentation has been moved to the `docs/` folder:

- **[README.md](docs/README.md)** - Complete library documentation with installation and usage examples
- **[INSTALLATION.md](docs/INSTALLATION.md)** - Comprehensive installation guide for new projects
- **[DEVELOPMENT.md](docs/DEVELOPMENT.md)** - Development guide for contributors
- **[CHANGELOG.md](docs/CHANGELOG.md)** - Version history and release notes
- **[LIBRARY_SETUP.md](docs/LIBRARY_SETUP.md)** - Library setup summary

## 🚀 Quick Start

```bash
# Install the library
npm install @recykal/ui

# Start development
npm run dev

# Build the library
npm run build:lib

# Start Storybook
npm run storybook
```

## 📦 Features

- 🎨 **Modern Design System** - Built with Radix UI primitives and Tailwind CSS
- ♿ **Accessibility First** - All components follow WCAG guidelines
- 📦 **TypeScript Support** - Full TypeScript support with proper type definitions
- 🎯 **Customizable** - Easy to customize with CSS variables and Tailwind classes
- 📱 **Responsive** - Mobile-first responsive design
- 🚀 **Performance** - Optimized for fast rendering and small bundle size
- 📚 **Storybook** - Interactive documentation and component playground

## 🎨 Using Styles

The library includes pre-built styles that you can import in your project:

```tsx
// Import the library's CSS file
import '@recykal/ui/styles'
```

**Note**: This is optional and only needed if you want to use the library's default styling. If you're using your own Tailwind configuration, you may not need this import.

## 📖 Documentation

For complete documentation, installation guides, and usage examples:

- **[Getting Started](src/stories/GettingStarted.mdx)** - Interactive getting started guide in Storybook
- **[Installation Guide](docs/INSTALLATION.md)** - Step-by-step installation instructions
- **[Component Documentation](src/stories/README.md)** - Browse all components in Storybook
- **[Development Guide](docs/DEVELOPMENT.md)** - Guide for contributors

## 🤝 Contributing

For information on how to contribute to this library, please see the [docs/DEVELOPMENT.md](docs/DEVELOPMENT.md) file.

## 📄 License

MIT License - see the [LICENSE](LICENSE) file for details.
npm package: @recylink/react-components
Description: Recylink components
Author: diegoolavarria
Latest version: 1.7.13

# `components`

> TODO

- Actualizar libreria de Storybooks por errores como
    - Module '"@storybook/react-webpack5"' has no exported member 'ComponentMeta'.

## Usage

```
const components = require('components');

// TODO: DEMONSTRATE API
```
npm package: @red-asuka/vitepress-plugin-tabs
Description: VitePress plugin - markdown custom container to display content in tabs
Author: Red-Asuka
Latest version: 0.0.4

# vitepress-plugin-tabs

VitePress plugin - markdown custom container to display content in tabs.

This project is inspired by [vuepress-plugin-tabs](https://github.com/pskordilakis/vuepress-plugin-tabs), but since vuepress-plugin-tabs is developed for VuePress, I use VitePress, so I wrote one myself.

![tabs](./images/tabs.png)

## Installation

### NPM

```bash
npm i -D @red-asuka/vitepress-plugin-tabs vue3-tabs-component
```

### Yarn

```bash
yarn add -D @red-asuka/vitepress-plugin-tabs vue3-tabs-component
```

### PNPM

```bash
pnpm i -D @red-asuka/vitepress-plugin-tabs vue3-tabs-component
```

Enable plugin in `.vitepress/config.ts`:

```ts
import tabsPlugin from '@red-asuka/vitepress-plugin-tabs'

export default {
  // ...
  markdown: {
    config: (md) => {
      tabsPlugin(md)
    },
  }
}
```

Register component in `.vitepress/theme/index.ts`:

```ts
import { Tab, Tabs } from 'vue3-tabs-component'

export default {
  // ...
  enhanceApp({ app }) {
    app.component('Tab', Tab)
    app.component('Tabs', Tabs)
  }
}
```

If you don't need to customize the style of the tabs, you can directly use the default style provided by `vitepress-plugin-tabs`. You only need to add the following code in `.vitepress/theme/index.ts`:

```ts
import '@red-asuka/vitepress-plugin-tabs/dist/style.css'
```

## Usage

Tab name can be wrapped in double quotes or not.

```md
:::: tabs

::: tab First tab

First tab content

:::

::: tab "Second tab"

Second tab content

:::

::::
```

### Set tab id

```md
:::: tabs

::: tab First tab

First tab content

:::

::: tab "Second tab" id="second-tab"

Second tab content

:::

::::
```

### Set default tab

```md
:::: tabs :options="{ defaultTabHash: 'second-tab' }"

::: tab First tab

First tab content

:::

::: tab "Second tab" id="second-tab"

Second tab content

:::

::::
```

### Set cache

By default, the tab will remember which was the last opened tab within 5 minutes. The cache time can be set by using the `cache-lifetime` attribute, with a unit of minutes.

```md
:::: tabs :cache-lifetime="10"

::: tab First tab

First tab content

:::

::: tab "Second tab"

Second tab content

:::

::::
```

Please refer to the following link for more usage: [vue-tabs-component](https://github.com/Jacobs63/vue3-tabs-component).
npm package: @red-bean/funny-ui
Description: @red-bean/funny-ui
Author: fusion-team
Latest version: 0.1.2

# @red-bean/funny-ui

一个面向 PC 的业务组件库

## 调试
启动调试

```
npm run lowcode:dev             # 打开开发环境，运行所有组件
```

构建

```
npm run lowcode:build
```
npm package: @red-explosion/biome-config
Description: Red Explosion's Biome config.
Author: ben Sherred
Latest version: 0.3.0

<p align="center"><img width="400" src="https://raw.githubusercontent.com/red-explosion/common-js/main/art/logo.svg" alt="Red Explosion Logo"></p>

# @red-explosion/biome-config

This is where your description should go. Limit it to a paragraph or two. Consider adding a small example.

## Usage

Add the config to your project dependencies:

```bash 
yarn add -D @red-explosion/biome-config

or

pnpm add -D @red-explosion/biome-config

or

npm install -D @red-explosion/biome-config
```

## Contributing

Please see [CONTRIBUTING](../../CONTRIBUTING.md) for details.

## License

@red-explosion/biome-config is open-sourced software licensed under the [MIT license](LICENSE.md).
npm package: @red-hat-insights/insights-frontend-components
Description: Components for Red Hat Insights Applications
Latest version: 3.41.70
Deprecated: Package has been moved to a different place github.com/RedHatInsights/frontend-components

[![Build Status](https://travis-ci.org/RedHatInsights/insights-frontend-components.svg?branch=master)](https://travis-ci.org/RedHatInsights/insights-chrome)
[![npm version](https://badge.fury.io/js/%40red-hat-insights%2Finsights-frontend-components.svg)](https://badge.fury.io/js/%40red-hat-insights%2Finsights-frontend-components)
[![codecov](https://codecov.io/gh/RedHatInsights/insights-frontend-components/branch/master/graph/badge.svg)](https://codecov.io/gh/RedHatInsights/insights-frontend-components)

# **This repository is archived and moved to a new one [RedHatInsights/frontend-components](https://github.com/RedHatInsights/frontend-components)**

Red Hat Insights Components for applications in a React.js environment

## Usage

npm install: `npm install @red-hat-insights/insights-frontend-components`

### Imports

Component
`import { Component } from 'node_modules/@red-hat-insights/insights-frontend-components`

SCSS
`@import '~@red-hat-insights/insights-frontend-components/index.css';`

## Development

Create a component inside of the PresentationalComponent folder

Structure

```bash
PresentationalComponents
└───YourComponent
    ├─── index.js
    ├─── YourComponent.js
    └─── your-component.scss
```

Build: `npm run build`
Test: `npm run test`

There is also a playground for any development
`npm run playground`

## Documentation Links

* Utils
  * [Redux](doc/utils/redux.md)

* Components
  * [Sample Component](doc/components/sample.md)
  * [Page Header](doc/components/page_header.md)
  * [Section](doc/components/section.md)
  * [Pagination](doc/components/pagination.md)
  * [Dropdown](doc/components/dropdown.md)
  * [Table](doc/components/table.md)
  * [Breadcrumbs](doc/components/breadcrumbs.md)
  * [Notifications](doc/components/notifications.md)
  * [Filters](doc/components/filters.md)

Hot-loadable components
* [Inventory](doc/components/inventory/inventory.md)
* [Remediations](doc/components/remediations.md)

## Conbribution

### Adding to index.js

Make sure that when you finish your component, you import it in the src/index.js file

If you're using any kind of pixel variable, be sure to use the px converter inside the Utilities

### Commit format

[Semantic release](https://github.com/semantic-release/semantic-release) is used in this project, so to trigger new release you should add specific format into your commit messages and new release will be triggered when PR is merged.

#### Used formatter

[Commit analyzer wildcard](https://github.com/karelhala/commit-analyzer-wildcard) is used for parsing commit messages so to trigger new release add one of these strings into your commit and new release is triggered

* Major - `<x.x.x>` or `<x.x.?>` or `<x.?.x>` or `<x.?.?>`
* Minor - `<?.x.x>` or `<?.x.?>`
* Bug - `<?.?.x>`
* No release - `<no>`