The Modern CSS Engine for High-Velocity Web Apps
Hyper-optimized, accessible Stylus component suite built for 2026. Featuring 35 modern primitives inspired by shadcn/ui, Foundation Motion UI transitions, fluid typography, and OKLCH color engine with zero runtime JavaScript.
// 2026 Native Cascade Layers & OKLCH Color Engine
@layer skeletonic.core, skeletonic.ui, skeletonic.motion;
:root
--cl-border: light-dark(oklch(.84 .01 250), oklch(.32 .01 250))
--cl-ring: light-dark(oklch(.40 .20 250), oklch(.70 .16 250))
input[type="email"], select, textarea
border: 1px solid var(--cl-border)
box-shadow: 0 1px 2px rgba(0, 0, 0, .05)
border-radius: .375remArchitected for Modern Web Applications
Engineered with CSS Cascade Layers, OKLCH color spaces, and 0ms JavaScript runtime overhead.
35 Modern UI Primitives
A full suite of accessible UI components inspired by shadcn/ui: from input-otp and custom select to sliding sheets and scroll-snap carousels.
Foundation Motion UI Engine
Hardware-accelerated 3D perspective hinges, rotational spins, and micro-interactions with timing curves and child sequence cascading (.stagger).
CSS Cascade Layers (@layer)
All compiled CSS is scoped under @layer skeletonic.* to isolate specificity and integrate seamlessly with Tailwind, Sass, or custom CSS.
OKLCH Dynamic Color Engine
Perceptually uniform color spaces with native light-dark() resolution, ensuring automatic WCAG 2.2 AA contrast compliance across themes.
Quick Start in 30 Seconds
Install via your favorite package manager or import directly from CDN.
# 1. Install via pnpm, npm, or bun
pnpm add @sebastienrousseau/skeletonic-stylus
# 2. Or scaffold components on-demand using the built-in CLI
npx @sebastienrousseau/skeletonic-stylus add button select input-otp
# 3. Import in your Stylus or CSS bundle
@import "@sebastienrousseau/skeletonic-stylus"Interactive Dashboard & Forms Showcase
Crisp, visible form controls, custom selects, segmented OTP slots, and accessible toggles.
Account Settings
Personalize profile and workspace identity.
Security & Preferences
Custom accessible checkboxes, radios, and OTP pins.
System Status
All Systems NormalTelemetry, progress monitoring, and banners.
@layer skeletonic.* to isolate specificity.dist/ without errors.35 Modern UI Primitives
Every element complies with WCAG 2.2 AA accessibility and modern HTML5 specifications.
Navigation & Breadcrumbs
Structured wayfinding with semantic markup.
Overlays & Tooltips
Zero-JS hover cards, tooltips, and top-layer dialogs.
Ultra-responsive CSS engine with 35 primitives and OKLCH color spaces.
What makes Skeletonic Stylus unique?
It compiles to native CSS with Cascade Layers, OKLCH color spaces, and 0ms JavaScript runtime overhead.
Buttons, Groups & Shortcuts
Stateful buttons, segmented groups, and keyboard shortcuts.
Media, Avatars & Carousel
Aspect ratios, avatar fallbacks, and pure CSS scroll snapping.
Zero-JS scroll snapping.
Hardware acceleration.
Skeletonic Stylus features custom scrollbars styled via scrollbar-color and scrollbar-width: thin.
Overlays, States & Layout Primitives
The rest of the suite: native top-layer overlays, loading and empty states, command search and ratio-locked media. Still zero runtime JavaScript — the overlays below are driven by the platform’s own popover and dialog APIs.
Popover & Dropdown
Native [popover] surfaces in the top layer — no positioning library, no script.
Cascade layers
Everything ships inside @layer skeletonic.*.
Modal & Sheet
Top-layer <dialog> with a backdrop, and a sheet that slides in from the edge.
Command Palette
Search scaffold with grouped results and shortcut hints.
Loading States
A spinner for indeterminate waits, skeletons for known layout.
Empty State
The zero-data screen, with room for a recovery action.
Aspect Ratio
Ratio-locked containers that never reflow as media loads.
.ratio-16-9 · also 1:1, 4:3, 21:9, 9:16
Navbar
Sticky application bar with a scroll-driven shadow.
Foundation Motion UI Engine
3D perspective hinges, rotational spins, and delightful micro-interactions.
Zero-Trust Hardened Quality & Performance
Strict quality guarantees verified in automated CI and release verification gates.
< 5 kB Core Footprint
Ultra-lean distribution compiled with csso and automated size-limit budgets, guaranteeing instant browser parsing.
Zero Runtime JavaScript
100% pure CSS engine eliminating hydration delays, main thread blocking, and client-side framework overhead.
100% WCAG 2.2 AA Audited
Pre-release automated testing using Playwright and Axe-core verifying color contrast, focus rings, and touch targets.
18 / 18 Pre-Release Verification Gates
Hermetic verification covering version coherence, package integrity, CycloneDX SBOM generation, and Stylint strict rules.
Frequently Asked Questions
What is the startup overhead of Skeletonic Stylus?
0 milliseconds. There is zero JavaScript bundle loaded or executed to render the components, resulting in perfect Core Web Vitals.
Can I use Skeletonic Stylus with Tailwind or Sass?
Yes. All styles are wrapped inside CSS Cascade Layers (@layer skeletonic.*), making it easy to override or combine without specificity collisions.
How do I customize the color palette?
All colors are exposed as CSS custom properties using OKLCH and light-dark() on :root, allowing seamless theming in a single line of CSS.