65 lines
3.5 KiB
Markdown
65 lines
3.5 KiB
Markdown
<p align="center">
|
|
<a href="https://fishies.lol/ui"><img src="https://fishies.lol/ui/banner.webp" alt="Fishies UI: plump buttons, water glass with a gold rim and a painted icon set" width="100%"></a>
|
|
</p>
|
|
|
|
<p align="center">
|
|
<a href="https://www.npmjs.com/package/@fishies/ui"><img src="https://img.shields.io/npm/v/@fishies/ui?style=flat-square&color=f4c656&labelColor=0b2233&label=%40fishies%2Fui" alt="npm version"></a>
|
|
<a href="https://www.npmjs.com/package/@fishies/ui"><img src="https://img.shields.io/npm/dm/@fishies/ui?style=flat-square&color=5cd8c6&labelColor=0b2233&label=downloads" alt="npm downloads"></a>
|
|
<a href="https://bundlephobia.com/package/@fishies/ui"><img src="https://img.shields.io/bundlephobia/minzip/@fishies/ui?style=flat-square&color=83cfbd&labelColor=0b2233&label=min%2Bgzip" alt="bundle size"></a>
|
|
<img src="https://img.shields.io/badge/react-18%2B-83cfbd?style=flat-square&labelColor=0b2233" alt="React 18 or newer">
|
|
<img src="https://img.shields.io/badge/types-included-83cfbd?style=flat-square&labelColor=0b2233" alt="TypeScript types included">
|
|
<a href="LICENSE"><img src="https://img.shields.io/badge/code-MIT-f4c656?style=flat-square&labelColor=0b2233" alt="code MIT"></a>
|
|
<a href="https://fishies.lol/ui"><img src="https://img.shields.io/badge/showcase-fishies.lol%2Fui-f4c656?style=flat-square&labelColor=0b2233" alt="live showcase"></a>
|
|
</p>
|
|
|
|
# @fishies/ui
|
|
|
|
The kit the social aquarium game [Fishies](https://fishies.lol) is drawn with: reef-toy React
|
|
components, design tokens as CSS variables and as data, and the painted system icon set. See every
|
|
piece live, with the Fishies Handbook, at **https://fishies.lol/ui**.
|
|
|
|
<div align="center">
|
|
<img src="https://cdn.fishies.lol/media/readme/2026-10-29/ui-components.webp" alt="Fishies UI components: buttons, round buttons, chips, badges, tags, stats, cards and tabs" width="49%">
|
|
<img src="https://cdn.fishies.lol/media/readme/2026-10-29/ui-icons.webp" alt="The painted Fishies system icon set: care tools, places and lists" width="49%">
|
|
</div>
|
|
|
|
```sh
|
|
bun add @fishies/ui
|
|
```
|
|
|
|
<sub>npm i @fishies/ui · pnpm add @fishies/ui · yarn add @fishies/ui</sub>
|
|
|
|
## Use it
|
|
|
|
```tsx
|
|
import '@fishies/ui/tokens.css' // the --fx-* custom properties
|
|
import '@fishies/ui/kit.css' // the components
|
|
import { Button, Panel, configureIcons } from '@fishies/ui'
|
|
|
|
// The icons ship in this package under icons/. Serve that folder, or point at a CDN copy:
|
|
configureIcons({ url: icon => `https://cdn.jsdelivr.net/npm/@fishies/ui@0.8.14/icons/${icon.name}.png` })
|
|
|
|
export function Shop() {
|
|
return <Panel title="Shop" icon="shop">
|
|
<Button tone="gold" icon="coin">Buy for 120</Button>
|
|
</Panel>
|
|
}
|
|
```
|
|
|
|
React 18 or newer is a peer dependency. Each component is its own module, so a bundler keeps only
|
|
what you import. `Select` and the loader carry their own stylesheets (`@fishies/ui/select.css`,
|
|
`@fishies/ui/loader.css`).
|
|
|
|
The motion tokens (`--m-quick`, `--m-ease-spring` and the rest) are slots: set them, or load a
|
|
stylesheet that does, and every component animates with them; leave them out and nothing moves.
|
|
|
|
## What is in it
|
|
|
|
| Folder | Holds |
|
|
| --- | --- |
|
|
| `dist/` | ES modules with type declarations, and the stylesheets |
|
|
| `src/` | the same components and tokens as TypeScript source |
|
|
| `icons/` | the painted icon set, one PNG per name, each twice its largest display size |
|
|
| `handbook/` | the Fishies Handbook as Markdown |
|
|
|
|
Version 0.8.14: the minor version follows the Fishies release it was taken from; a patch is a fix to the kit itself.
|