splatoon-ui

KO | EN

gitlite — search

#codex #kotlin #large-language-models #react-native #hacktoberfest #cpp #rust #go #typescript #privacy

(★ 9)

No description available.

File Explorer

ZIP Download

- config.json
- - ci.yml
  - deploy-pages.yml
  - publish.yml
- - components.json
  - mdx-components.tsx
  - next.config.ts
  - package.json
  - postcss.config.mjs
  - public
  - tsconfig.json
- - CHANGELOG.md
  - CREDITS.md
  - LICENSE
  - NOTICE
  - package.json
  - README.md
  - README_JA.md
  - README_ZH.md
  - tsconfig.json
  - tsconfig.package.json
  - tsup.config.ts
- analyze-splatoon-reference.mjs
- analyze-splatoon-videos.mjs
- collect-splatoon-reference.mjs
- banner-divider-layout-regression.mjs
- button-hover-animation-regression.mjs
- character-assets-regression.mjs
- component-api-encapsulation-regression.mjs
- css-modules-transform-regression.mjs
- demo-smoke-regression.mjs
- event-callout-assets-regression.mjs
- feed-carousel-assets-regression.mjs
- feed-carousel-initial-layout-regression.mjs
- horizontal-overflow-regression.mjs
- in-view-regression.mjs
- overlay-layering-regression.mjs
- package-consumer-smoke.mjs
- package-dts-regression.mjs
- package-publish-regression.mjs
- progress-semantics-regression.mjs
- reference-asset-coverage-regression.mjs
- reference-crawl-pipeline-checks.mjs
- registry.mjs
- release-readiness-checks.mjs
- responsive-component-regression.mjs
- run.mjs
- section-background-assets-regression.mjs
- showcase-media-assets-regression.mjs
- squid-loader-assets-regression.mjs
- tabs-regression.mjs
- tabs-swipe-regression.mjs
- tape-image-assets-regression.mjs
- theme-role-tokens-regression.mjs
- ui-entrypoints-regression.mjs
- video-dialog-media-regression.mjs
- video-reference-analysis-checks.mjs
- weapons-gallery-assets-regression.mjs
.gitignore
.impeccable.md
.prettierignore
.prettierrc
AGENTS.md
CLAUDE.md
CREDITS.md
DESIGN.md
eslint.config.mjs
LICENSE
NOTICE
package.json
pnpm-lock.yaml
pnpm-workspace.yaml
README.md
README_JA.md
README_ZH.md
tsconfig.base.json
tsconfig.json

# Use via CDN

jsDelivr

jsDelivr serves any public GitHub repository as a CDN with zero setup. Pick a version and a file to get a ready-to-paste link and snippet.

Version

File

Link

Example

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

A React component library inspired by Splatoon's visual language, providing ready-to-use UI tools for fan creators.

> **This project is not affiliated with Nintendo in any way.** Splatoon is a registered trademark of Nintendo. This project is fan-made and intended for non-commercial fan community use only. If this project infringes on any rights, please contact us and we will address it immediately.

**[中文版 (Chinese Version)](./README_ZH.md) | [日本語版 (Japanese Version)](./README_JA.md)**

## About

Splatoon UI is a comprehensive React component library shaped around Splatoon's vivid, high-contrast, ink-heavy visual language. Build Splatoon-style fan sites, wikis, tournament pages, and more in minutes.

**Key features:**

- Buttons with liquid ink drip animations
- Card system with torn-paper, tape, and staple variants
- WebGL ink splash transition effects
- Physics-driven pendulum card stack carousel
- 12 ink splat decorative components
- 15 camouflage and pattern background textures (Retina support)
- Full accessibility support (`prefers-reduced-motion`, WCAG AA contrast)

## Quick Start

### Use the package

```bash
npm install splatoon-ui tailwindcss@^4 tw-animate-css@^1.4
```

Import the global stylesheet once in your app shell:

```tsx
import 'splatoon-ui/styles.css'
```

Use server-safe primitives from the default entrypoint, and import the full public API by component subpath:

```tsx
import { Alert, Badge, Input } from 'splatoon-ui'
import { Button } from 'splatoon-ui/button'
import { Dialog } from 'splatoon-ui/dialog'
```

Documentation is available at https://dev-ui.s8p.io/en/docs.

Splatoon UI styles reference static assets from `/_images`, `/fonts`, and `/svgs`. Copy the package `public/_images`, `public/fonts`, and `public/svgs` directories into your app's public root before deploying.

The stylesheet is a Tailwind CSS v4 entrypoint. Your app needs a normal Tailwind v4/PostCSS pipeline that can process CSS imports from npm packages.

For granular CSS, import the shared theme once and the styles for each component entry you use. Do not combine these with the aggregate `styles.css` import.

```tsx
import 'splatoon-ui/theme.css'
import 'splatoon-ui/styles/button.css'
import 'splatoon-ui/styles/dialog.css'
```

### Run the demo locally

```bash
# Clone the project
git clone https://github.com/YoungSx/splatoon-ui.git
cd splatoon-ui

# Install dependencies
pnpm install

# Start dev server
pnpm dev
```

Open http://localhost:4317 to see it in action.

## Tech Stack

| Layer           | Technology                                |
| --------------- | ----------------------------------------- |
| Framework       | Next.js 16 (App Router + Turbopack)       |
| UI Base         | shadcn/ui + Base UI                       |
| Styling         | Tailwind CSS v4                           |
| Animation       | framer-motion + CSS transitions/keyframes |
| WebGL           | Custom ink splash shaders                 |
| Icons           | lucide-react                              |
| Language        | TypeScript (strict mode)                  |
| Package Manager | pnpm                                      |

## Public API

Every published component below has a package subpath, generated API reference, and docs example. The root `splatoon-ui` entrypoint stays server-safe; use subpath imports for client components and richer APIs.

| Import path                     | Main exports                                                            | Purpose                                                  |
| ------------------------------- | ----------------------------------------------------------------------- | -------------------------------------------------------- |
| `splatoon-ui/alert`             | `Alert`                                                                 | Torn-card status and feedback surface.                   |
| `splatoon-ui/badge`             | `Badge`                                                                 | Skewed label badge with curated color variants.          |
| `splatoon-ui/button`            | `Button`                                                                | Ink-styled action button with drip and arrow treatments. |
| `splatoon-ui/button-group`      | `ButtonGroup`, `ButtonGroupItem`                                        | Segmented button clusters for compact actions.           |
| `splatoon-ui/icon-button`       | `IconButton`                                                            | Circular icon-only controls and carousel arrows.         |
| `splatoon-ui/wave-button`       | `WaveButton`                                                            | Blob-shaped graphical trigger with native line glyph.    |
| `splatoon-ui/card`              | `Card`                                                                  | Generic card surface primitives.                         |
| `splatoon-ui/staple-card`       | `StapleCard`                                                            | Feed-style card with stapled paper edges and media.      |
| `splatoon-ui/torn-card`         | `TornCard`                                                              | Torn-paper editorial card surface.                       |
| `splatoon-ui/rugged-card`       | `RuggedCard`                                                            | Rugged hanging-label card treatment.                     |
| `splatoon-ui/carousel`          | `Carousel`, `FeedCarousel`, `MarqueeCarousel`, `WeaponsGalleryCarousel` | Carousel primitives and production gallery presets.      |
| `splatoon-ui/checkbox`          | `Checkbox`                                                              | Ink-styled checkbox control.                             |
| `splatoon-ui/dialog`            | `Dialog`                                                                | Base UI dialog wrapper with Splatoon UI surfaces.        |
| `splatoon-ui/input`             | `Input`                                                                 | Text input primitive.                                    |
| `splatoon-ui/label`             | `Label`                                                                 | Form label primitive.                                    |
| `splatoon-ui/loader`            | `Loader`                                                                | Squid and morph loading indicators.                      |
| `splatoon-ui/radio-group`       | `RadioGroup`, `RadioGroupItem`                                          | Radio selection group.                                   |
| `splatoon-ui/progress`          | `Progress`                                                              | Ink-styled progress indicator.                           |
| `splatoon-ui/select`            | `Select`                                                                | Select trigger, content, item, and value primitives.     |
| `splatoon-ui/segmented-control` | `SegmentedControl`                                                      | Toggleable segmented control.                            |
| `splatoon-ui/popover`           | `Popover`                                                               | Floating content and trigger primitives.                 |
| `splatoon-ui/sheet`             | `Sheet`                                                                 | Side sheet overlay and trigger primitives.               |
| `splatoon-ui/switch`            | `Switch`                                                                | Binary switch control.                                   |
| `splatoon-ui/tabs`              | `Tabs`                                                                  | Tab navigation with ink-styled active states.            |
| `splatoon-ui/list`              | `List`, `ListItem`                                                      | Styled list display primitives.                          |
| `splatoon-ui/section`           | `Section`                                                               | Patterned section wrapper.                               |
| `splatoon-ui/banner-divider`    | `BannerDivider`                                                         | Layered banner divider decoration.                       |
| `splatoon-ui/dotted-divider`    | `DottedDivider`                                                         | Dotted horizontal or vertical divider.                   |
| `splatoon-ui/splatoon-title`    | `SplatoonTitle`                                                         | Display title treatment.                                 |
| `splatoon-ui/heading-tape`      | `HeadingTape`                                                           | Tape-backed heading treatment.                           |
| `splatoon-ui/tape-title`        | `TapeTitle`                                                             | Compact tape title primitive.                            |
| `splatoon-ui/tape`              | `Tape`, `Staple`                                                        | Positioned tape and staple decoration assets.            |
| `splatoon-ui/wave-canvas`       | `WaveCanvas`                                                            | Animated canvas wave strip for section boundaries.       |

## Design System

### Colors

| Name        | Value     | Usage                   |
| ----------- | --------- | ----------------------- |
| Neon Yellow | `#EAFF3D` | Primary brand, CTA      |
| Ink Blue    | `#603BFF` | Secondary brand, hover  |
| Ink Purple  | `#AF50FF` | Accent                  |
| Ink Green   | `#6AF7CE` | Play / special controls |
| Ink Orange  | `#FF9750` | Warm actions            |
| Ink Red     | `#FF505E` | Destructive actions     |
| Chaos Black | `#0D0D0D` | Text, shadows           |
| Desert Sand | `#F5F0E8` | Backgrounds             |

### Typography

| Role              | Font             | Usage                     |
| ----------------- | ---------------- | ------------------------- |
| Display / Heading | fooregular       | Hero and section headings |
| Alt               | obviously-narrow | Buttons, categories       |
| Body              | Montserrat       | Body text                 |

### Shadows

Primary shadows use soft blur for general UI elevation; hard-offset solid colors are reserved for special paper-cutout-style elements:

```
# Soft blur (primary)
shadow-soft-splat-sm  →  0 4px 10px rgba(0,0,0,0.14)
shadow-soft-splat-md  →  0 8px 18px rgba(0,0,0,0.16)
shadow-soft-splat-lg  →  0 14px 30px rgba(0,0,0,0.18)

# Hard offset (legacy / special cases)
shadow-solid-sm  →  2px 2px 0px
shadow-solid     →  4px 4px 0px
shadow-solid-lg  →  6px 6px 0px
shadow-solid-xl  →  8px 8px 0px
```

## Repository Structure

```
apps/docs/                 # Next.js docs and demo site
packages/ui/
  src/components/ui/       # Public components, internal helpers, and CSS Modules
  public/_images/          # Publishable image assets
  public/fonts/            # Self-hosted fonts
  public/svgs/             # Shared SVG assets
  scripts/                 # Package build and docs registry helpers
tests/                     # Regression and release-readiness checks
```

## Development Commands

```bash
pnpm dev              # Start dev server
pnpm build            # Production build
pnpm start            # Start production server
npx tsc --noEmit      # Type check
pnpm reference:crawl  # Generate a reference asset manifest from the sitemap (scratch/ output)
pnpm reference:crawl:all  # Crawl every English-locale sitemap page
pnpm reference:crawl:all-locales  # Crawl every sitemap page across locales (separate output)
pnpm reference:analyze    # Map the manifest into component asset candidates
pnpm reference:analyze:all-locales # Analyze the all-locale manifest
pnpm reference:analyze:videos # Deduplicate and catalog official remote mp4 candidates
```

To download the referenced assets, run `pnpm reference:crawl:download`. Downloads still land
in `scratch/`; curate, rename, and approve assets before moving anything into publishable
static directories.
The all-locale crawl writes to `scratch/splatoon-reference-all-locales/` so it does not
overwrite the default English reference report.
Video analysis only writes remote candidates into scratch; it does not copy mp4 binaries into
publishable static directories.

## Package Release

```bash
pnpm install
pnpm typecheck
pnpm build:package
pnpm pack:dry-run
pnpm test:package-consumer
pnpm changeset
pnpm version
pnpm publish --access public
git push --follow-tags
```

Use `pnpm pack:dry-run` before publishing and check that the tarball only contains `dist`, `public/_images`, `public/fonts`, `public/svgs`, README files, license, notice, and package metadata.

## License

MIT

## Copyright Notice

This project is **fan-made** and is not affiliated with, authorized by, or endorsed by Nintendo Co., Ltd.

- **Splatoon** is a registered trademark of Nintendo
- All Splatoon-related visual styles, design language, and artwork are copyright of Nintendo
- This project only uses publicly accessible web design as visual reference, and does not contain any game code, asset files, or unreleased materials
- This project is intended for non-commercial fan community use only

**If this project infringes on any rights, please contact us via GitHub Issues and we will address it immediately.**

---

See [CREDITS.md](./CREDITS.md) for full attribution of assets and tools.

_Built by Splatoon fans, dedicated to all Splatoon players._

splatoon-ui

Owner Repos

File Explorer

# Use via CDN

Was this content helpful?

Recent Feedback

splatoon-ui

Owner Repos

File Explorer

# Use via CDN

Was this content helpful?

Recent Feedback

Download README