open-index/open-npm huggingface dataset:
npm package: @justaplant/pwettybuttons
Description: Small pwetty uwu buttons
Author: justaplant
Latest version: 1.1.0

# Pwetty Buttons

## Install
`npm i @justaplant/pwettybuttons`

or

`yarn add @justaplant/pwettybuttons`

## Usage
`import {Button} from '@justaplant/pwettybuttons';`

Detailed information can be found in [storybook](https://60c1045d60dd96003be4728c-zuylmdsomo.chromatic.com/?path=/story/intro--page) and [sandbox](https://codesandbox.io/s/pwettybuttons-066bs?file=/src/App.js).
npm package: @justaweb-dev/histoire-library
Description: A Histoire components library
Author: justawebdev
Latest version: 1.0.6

# Histoire Component Library

A Vue 3 component library with accessible, modern UI components, built with Tailwind CSS and designed for easy integration into your projects.

---

## Features

- **Accessible color palette:**  
  - Light mode: salmon tones  
  - Dark mode: dark grays and neon accents
- **Fully typed with TypeScript**
- **Tailwind CSS** for utility-first styling
- **Dark mode** support via `.dark` class
- **Ready for use as a package** in other Vue projects

---

## Installation

### 1. Build the library

```bash
pnpm install
pnpm build
```

### 2. Link the library locally (for development)

In the library folder:

```bash
pnpm link --global
```

In your consuming project (e.g. `vue-frontend`):

```bash
pnpm link --global @justaweb-dev/histoire-library
```

### 3. Import the CSS in your app

```ts
import '@justaweb-dev/histoire-library/dist/histoire-comp-lib.css'
```

---

## Usage

Import and use components in your Vue app:

```ts
import { HButton, HNavbar, HCard, HHero, HInput, HInputUpload, HModal, HTable, HPagination } from '@justaweb-dev/histoire-library'
```

---

## Tailwind CSS in Production

**Recent change:**  
To ensure Tailwind CSS styles are included and work correctly in production builds, the following line was added to [`src/global.css`](src/global.css):

```css
@import 'tailwindcss' important;
```

This guarantees that all Tailwind utilities are available in the final CSS bundle, even after tree-shaking and minification.

---

## Dark Mode

Dark mode is enabled using the `.dark` class on a parent element.  
You can toggle dark mode by adding or removing the `dark` class on the `<html>` or `<body>` element.

---

## Development

- Run storybook-like playground:
  ```bash
  pnpm story:dev
  ```
- Build for production:
  ```bash
  pnpm build
  ```

---

## License

MIT

---