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) | 日本語版 (Japanese Version)
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)
npm install splatoon-uiImport the global stylesheet once in your app shell:
import 'splatoon-ui/styles.css'Use server-safe primitives from the default entrypoint, and import the full public API by component subpath:
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.
# Clone the project
git clone https://github.com/YoungSx/splatoon-ui.git
cd splatoon-ui
# Install dependencies
pnpm install
# Start dev server
pnpm devOpen http://localhost:4317 to see it in action.
| 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 |
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. |
| 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 |
| Role | Font | Usage |
|---|---|---|
| Display / Heading | fooregular | Hero and section headings |
| Alt | obviously-narrow | Buttons, categories |
| Body | Montserrat | Body text |
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
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
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 candidatesTo 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.
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-tagsUse 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.
MIT
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 for full attribution of assets and tools.
Built by Splatoon fans, dedicated to all Splatoon players.