@nekostack/ui

Vanilla CSS component library consuming @nekostack/theme tokens. 83 components, zero hardcoded colors, BEM-light naming.

Pick a component from the sidebar

Each component renders standalone so you can compare it across themes and modes.

Start with Button Or a Phone Mockup

Button

Default is primary. 9 color variants, 3 shape variants, sizes, states, group.

Colors

Shapes

Sizes / states

Group

Input

Text/email/password input with sizes, invalid state, disabled state.

Email

Small

Large

InvalidRequired.

Disabled

https://

Textarea

Multi-line input.

Message

Select

Native select, theme-aware via color-scheme.

Default

Disabled

Checkbox

Native checkbox, themed.

Checked Unchecked Disabled

Radio

A B Disabled

Switch

On Off

Range

Styled input[type="range"]. Track + thumb both themed.

File Input

Styled input[type="file"] via ::file-selector-button.

Rating

Star rating via hidden radios + clip-path stars.

Card

Header / body / footer with optional interactive variant.

A card with a header badge and footer actions.

Whole card is a link with hover/focus states.

Badge

Solid-fill inline labels. 9 colors + pill modifier.

Primary Secondary Accent 1 Accent 2 Accent 3 Info Success Warning Danger Pill

Tag

Soft-tinted chips for filters / selections.

Neutral Primary Secondary Accent 1 Accent 2 Accent 3 Info Success Warning Danger

Removable

Remove me

Alert

Primary

Default primary-toned alert.

Info

Heads up — something to know.

Success

Saved.

Warning

Proceed with caution.

Danger

Something went wrong.

Toast

Floating notification. Shown statically for preview.

Update available

v0.2 ready to install.

Saved

All changes synced.

Slow connection

Retry?

Upload failed

Could not reach the server.

Spinner

Progress

Radial Progress

Set --value inline (0–100). Uses conic-gradient.

25%

50%

75%

90%

Skeleton

Countdown

Tabular-numeric clocked display with themed cells.

02:34:56

Accordion

Built on native <details>. Animated chevron, no JS needed.

What's @nekostack/ui?

A vanilla CSS component library consuming @nekostack/theme tokens. No framework dependency.

Does it require JavaScript?

Most components are pure CSS. A few (dropdown click, carousel auto-rotate, countdown timer) accept optional JS for richer behavior but ship usable CSS-only fallbacks.

Can I theme it?

Yes — switch themes using the sidebar selector to see Neko, Synthwave, and Cupcake all share the same components.

Swap

Two-state visual toggle. Click to switch.

🌙☀️ ✕≡ 😺😻

Dropdown

Hover or focus to open. Add data-open="true" via JS for click semantics.

Container

Max-width content wrapper.

Centered content with max-width and gutters.

Stack

Vertical gap between children.

Stack item 1

Stack item 2

Stack item 3

Cluster

Horizontal wrap with gap.

Status Pass

Grid

Auto-fit responsive columns.

Cell 1

Cell 2

Cell 3

Cell 4

Center

Centered

Divider

Left

Right

Table

Q1 results
Month	Revenue	Status
January	$12.4k	On track
February	$14.2k	On track
March	$13.8k	Dip
April	$16.1k	Record

List

AAliceOnline
BBobAway
CCarolOffline

Avatar

S CM LG

Stat

Users8,249+12.3%

Revenue$42k-2.1%

Uptime99.97%

Empty State

📦

No items yet

When you create items, they'll appear here.

Tabs

Link

Default link Muted Subtle

Breadcrumb

Pagination

Navbar

Top navigation: brand + menu + actions.

Bottom Navigation

Mobile tab bar with active indicator.

Footer

Hero

Build with @nekostack/ui

Vanilla CSS, fully themable, no framework required.

Dialog

Native <dialog> with backdrop.

Drawer

Side-anchored panel. Demo shown statically.

Drawer

Slide-in sidebar pattern.

Tooltip

Hover or focus to reveal. 4 placements.

Popover

Chat Bubble

Conversation message bubbles.

Hey, did you see the new component preview?

Yeah! The mockups are great.

Glad you like them.

Indicator

Position a marker on a corner of any element.

9+

●AB

NEW

Card

Carousel

CSS scroll-snap. Drag/scroll horizontally.

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Diff

Side-by-side before/after, status-tinted.

- function add(a, b) { - return a + b - }

+ const add = (a, b) => a + b

Timeline

Project created
Jan 4, 2026
v0.1 published
Feb 12, 2026
Cupcake theme added
Jun 15, 2026
26 new components
Today

Steps

Wizard progress indicator. data-state controls per-step.

Account
Plan
Payment
Confirm

Vertical

Sign up
Configure
Deploy

Artboard

Fixed-size device canvas for previewing content at exact viewport sizes.

Phone (320×568)

Phone viewport

Pre-sized for mobile previews — drop content in and see it at native dimensions.

Mask

Shape clip-paths for images / avatars / decorative wrappers.

Mockup: Window

OS window chrome with traffic-light controls.

App window

Drop any content here and it renders inside the mockup frame.

Mockup: Browser

Browser chrome with URL bar.

https://nekostack.dev/ui

Web page preview

Use this to showcase a website inside docs or marketing pages.

Mockup: Phone

Stylized phone with notch.

Mobile

Drop a mobile UI preview here.

Mockup: Code

Terminal / code block with line prefixes.

npm install @nekostack/ui added 1 package in 2s found 0 vulnerabilities peer @nekostack/theme not installed

Prose

Long-form typography wrapper.

Headings, paragraphs, lists

The .neko-prose class provides sensible long-form typography: capped line length, stacked margins, styled lists and blockquotes.

Quoted content gets a primary accent border.

Unordered list item
Another list item

Code

Inline code + keyboard keys.

const x = 42; Ctrl + S

Collapse

Checkbox-controlled show/hide. Alternative to accordion when you don't want native <details>.

Open by default

This collapse starts open. Click the title to close.

Animated grid-template-rows

Uses modern CSS grid animation for a smooth height transition.

Tree

Nested expand/collapse list — built recursively on <details>.

📁 src

📁 components

📄 button.css

📄 card.css

📄 form.css

📁 themes

📄 neko.json

📄 cupcake.json

📄 index.ts

📁 dist

📄 ui.css

📄 ui.min.css

Theme Controller

Pre-styled dark/light toggle. Wire to data-mode in app code.

Toggle dark / light

Banner

Full-width announcement above content. Distinct from .neko-alert (which is block-level dismissable).

Status

Tiny inline status dot. Use next to text labels for live state.

Operational

Degraded

Outage

Provisioning

Unknown

Sizes

Loading Dots

Three-dot bouncing loader. Alternative to spinner.

Loading…

Calendar

Static calendar grid primitive. Wire up day cells in app code.

S

M

T

W

T

F

S

Stepper

Number input with +/- buttons. Native spinners hidden.

Sizes

Disabled

Kbd Combo

Group of <kbd> elements joined by separators (default +, modifier →).

CtrlShiftP Command palette

⌘K Quick search

GD Go to dashboard (Gmail-style)

@nekostack/ui

Pick a component from the sidebar

Button

Input

Textarea

Select

Checkbox

Radio

Switch

Range

File Input

Rating

Card

Standard

Interactive

Badge

Tag

Alert

Toast

Spinner

Progress

Radial Progress

Skeleton

Countdown

Accordion

Swap

Dropdown

Container

Stack

Cluster

Grid

Center

Divider

Table

List

Avatar

Stat

Empty State

No items yet

Tabs

Link

Breadcrumb

Menu

Pagination

Navbar

Bottom Navigation

Footer

Hero

Build with @nekostack/ui

Dialog

Drawer

Drawer

Tooltip

Popover

Chat Bubble

Indicator

Carousel

Diff

Timeline

Steps

Artboard

Phone viewport

Mask

Mockup: Window

App window

Mockup: Browser

Web page preview

Mockup: Phone

Mobile

Mockup: Code

Prose

Headings, paragraphs, lists

Code

Collapse

Tree

Theme Controller

Banner

Status

Loading Dots

Calendar