# tights

> A component library for React.

Latest version **5.0.2** (published 2025-09-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install tights
pnpm add tights
yarn add tights
bun add tights
```

## Health

**Score 55/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; high maintenance score; high quality score.

Warnings: low downloads.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 5.0.2 |
| Published | 2025-09-25 |
| First published | 2019-08-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 43.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Author | Kevin Sylvestre |
| Maintainers | ksylvest |

## Links

- npm: https://www.npmjs.com/package/tights
- Repository: https://github.com/ksylvest/tights
- Homepage: https://github.com/ksylvest/tights#readme
- Issues: https://github.com/ksylvest/tights/issues
- npm.io page: https://npm.io/package/tights

## Recent versions

- 5.0.2 (latest) — 2025-09-25
- 5.0.1 — 2025-09-25
- 5.0.0 — 2025-09-25
- 4.2.0 — 2025-03-31
- 4.1.2 — 2023-11-20
- 4.0.2 — 2023-07-19
- 4.0.1 — 2023-07-17
- 4.0.0 — 2023-07-17
- 3.9.1 — 2023-07-04
- 3.9.0 — 2023-07-04
- 3.8.0 — 2023-06-30
- 3.7.0 — 2023-06-26
- 3.6.0 — 2023-06-26
- 3.5.0 — 2023-06-22
- 3.4.0 — 2023-06-22
- … 20 more at https://npm.io/package/tights/versions

## README

# Tights

Tights is a set of [React](https://reactjs.org) components for [Bulma](https://bulma.io).

## Installation

### Yarn

```sh
yarn add bulma clsx tights
```

### NPM

```sh
npm install bulma clsx tights
```

## Usage

Components follow the standard naming convention used within Bulma:

```typescript
import {
  Button,
  Modal,
  ModalBackground,
  ModalCard,
  ModalCardHead,
  ModalCardBody,
  ModalCardFoot,
  ModalCardTitle,
  ModalCardClose,
} from "tights";

const Confirmation: FC<{
  onConfirm(): void;
  onCancel(): void;
  onClose(): void;
}> = ({ onConfirm, onCancel, onClose }) => (
  <Modal>
    <ModalBackground />
    <ModalCard>
      <ModalCardHead>
        <ModalCardTitle>Modal</ModalCardTitle>
        <Delete onClick={onClose} />
      </ModalCardHead>
      <ModalCardBody>...</ModalCardBody>
      <ModalCardFoot>
        <Button onClick={onConfirm}>Confirm</Button>
        <Button onClick={onCancel}>Cancel</Button>
      </ModalCardFoot>
    </ModalCard>
    <ModalClose size="medium" onClick={onClose} />
  </Modal>
);
```

## Copyright

Copyright (c) 2025 [Kevin Sylvestre](https://ksylvest.com). See LICENSE for details.

---
_Source: https://npm.io/package/tights · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._