Modularized Component Playground

Explore the premium
Nanokit Design System

Welcome to the decoupled Component Showcase. We have subdivided our component playground into modular, lightning-fast routes to improve cognitive load, increase render efficiency, and resolve page weight issues.

Component Categories

Select a category to view interactive showcases and live details

@nkapp/lib v0.0.1
6 Components

Atoms

Fundamental elements: Button, Badge, Card, Alert, Logo, and Skeleton.

Live Preview
Success
Browse components
12 Components

Inputs

Form fields, select menus, toggle switches, comboboxes, and dynamic list editors.

Live Preview
Env: local
Browse components
5 Components

Data Display

Stats, code syntax blocks, sparklines, progress charts, and sortable tables.

Live Preview
90%
Browse components
2 Components

Layout

Structural headers, grid systems, and animated containers.

Live Preview
Browse components
Modal Component

Plans & Tiers

Beautiful multi-tier plan selectors, pricing grids, and subscription managers.

Live Preview
PRO PLAN
€15/month
Browse components
4 Variants

Credit Card

Mock credit card templates (Visa, Mastercard, Amex) scaling cleanly.

Live Preview
•••• 4242
VISA / MC
Browse components
2 Components

Feedback & Dialogs

Aria overlays, dialog transitions, loaders, and status alerts.

Live Preview
Loading...
Browse components
2 Templates

Auth Forms

Ready-to-use premium templates for login and registration views.

Live Preview
🔒 login|👤 signup
Browse components
Advanced Form Flow ↗

Interactive Forms

Zod schemas + Controller registrations with live error-tracking showcases.

Live Preview
📝 React Hook Form• Zod
Browse components
Dialog Test

Select Dialog

Interactive selections using modular accessible modal dialog wrappers.

Live Preview
🎯 Select in Dialog
Browse components
2 Helpers

API Error Handling

Field-level validation error formatting via formatApiError — inline field messages and combined banners.

Live Preview
fieldErrorscombined
Browse components