Skip to content
Xshna.cssv3.0.0
PlaygroundUtilities
COMPONENT CATALOGUE

Everything, organized.

Detailed, tested markup examples and meaningful production guidance for every category.

Getting startedInstallation

Deploy on any ordinary static web host, Apache, LiteSpeed, Nginx or PHP hosting.

↗
Getting startedArchitecture

Modular cascade layers, component APIs, a predictable token system and optional scripts.

↗
Design systemDesign DNA

Five complete design personalities, controlled with one data attribute.

↗
Design systemTheming

Light, dark and system themes with coordinated semantic tokens.

↗
Design systemBrand Engine

Create cohesive branded UI by changing a single brand seed.

↗
Design systemDensity Engine

Change vertical rhythm, table density, forms and card padding together.

↗
Design systemAutopilot

Components respond to their own available width, not just the viewport.

↗
UtilitiesResponsive utilities

Static breakpoints without build-time class discovery or compilation.

↗
UtilitiesUtility catalogue

More than a thousand named utilities, plus responsive and interaction variants.

↗
FoundationsAccessibility

Keyboard focus, native HTML semantics, high contrast and reduced-motion defaults.

↗
FoundationsMotion

Coordinated motion modes with automatic reduced-motion handling.

↗
FoundationsRTL and localization

Logical CSS spacing and layout patterns for multilingual websites.

↗
ComponentsButtons

Buttons in primary, secondary, ghost and status styles, with sizes, icon controls and disabled states.

↗
ComponentsBadges and status

Compact semantic markers, indicators and progress context.

↗
ComponentsCards

Flat, elevated, statistical and media cards that integrate with layout and DNA systems.

↗
ComponentsAlerts and callouts

Dismissible notices, semantic status treatments and editorial callouts.

↗
ComponentsForms

Inputs, selectors, textareas, floating labels, input groups, switches, ranges and field help.

↗
InteractionsForm validation

Native constraint validation with custom field errors and programmatic hooks.

↗
InteractionsInput tools

Text counters, reveal-password controls and select-all checkboxes.

↗
InteractionsTabs

Accessible tabs with roving keyboard focus and proper panel relationships.

↗
InteractionsAccordion

Single or multi-expand disclosures with managed aria-expanded state.

↗
InteractionsCollapse

Single-element disclosures that can be controlled from multiple buttons.

↗
InteractionsDialog and modal

Native HTML dialog with focus handling and Escape support.

↗
InteractionsDrawer and offcanvas

Side-panel experiences implemented with native dialog under the hood.

↗
InteractionsDropdowns

Contextual menus for simple links or action lists.

↗
InteractionsToast notifications

Programmatic, accessible status updates with dismiss buttons and safe text rendering.

↗
ComponentsData tables

Responsive striped tables, sticky headings and semantic headers.

↗
InteractionsTable sort and filtering

Client-side sorting and filtering for ordinary HTML tables.

↗
InteractionsCarousel

Accessible, scroll-snap carousel without heavyweight slider dependencies.

↗
ComponentsNavigation and breadcrumbs

Navbar, link groups, breadcrumb trail and active navigation states.

↗
PatternsApplication shell

Premium dashboards with sidebar, header and responsive main area.

↗
ComponentsPagination

Accessible page controls and current page indicators.

↗
ComponentsProgress and skeletons

Native progress bars, meters, spinners, and skeleton placeholders.

↗
ComponentsTimeline and steps

Activity timelines and ordered workflow stepper patterns.

↗
ComponentsAvatars and media

Avatar initials, photos, stacks and flexible media objects.

↗
PatternsPricing cards

Structured, featured and comparison-ready commercial offer cards.

↗
PatternsHero and marketing

Large expressive headlines, call-to-action clusters and product layouts.

↗
InteractionsCommand palette

Keyboard-launchable command surface using native dialog.

↗
ComponentsPopovers and tooltips

Native HTML popovers and CSS-only tooltips for short annotations.

↗
FoundationsPrint and documents

Print media behavior, cleaner reports and semantic document layouts.

↗
ReferenceJavaScript API

Optional vanilla JavaScript modules with a stable public Xshna API.

↗
ReferenceCustom events

Listen for state transitions without direct dependency on internal code.

↗
ReferenceInspector

Development-only runtime diagnostics for basic HTML structure and xsh components.

↗
ReferenceBrowsers and hosting

Browser compatibility decisions and safe fallbacks for modern CSS.

↗
ReferenceProduction deployment

Operational checklist for caching, CSP, security, accessibility and repeatable delivery.

↗
ReferenceMigration from v1

Upgrade guidance from the initial 1.0.0 prototype to the expanded 3.0.0 package.

↗
ReferenceProduct positioning

What Xshna delivers and what it deliberately does not attempt.

↗