Playground

Interactive showcase of all UI components

@nkapp/lib Components

Atoms

Button

Badge

Default
Secondary
Destructive
Outline
Success
Warning

Card

Card Title
Card description goes here
This is the card content area.

Alert

Logo

Skeleton

Inputs

NkInput

This field is required

NkTextArea

Too short

NkCheckbox

NkSelect

Framework

NkSwitch

NkToggleGroup

Selected: dev

NkNumberPicker

Stepper for numeric values.

Data Display

NkCodeBlock

example.ts
1import { Button } from '@nkapp/lib';
2
3export function App() {
4  return <Button>Hello</Button>;
5}

Stats

Users

1,234

Active this month

Revenue

$12.5k

+15% vs last month

Layout

NkViewHeader

Welcome back!

Dashboard

NkViewContainer

This content is wrapped in NkViewContainer with optional animation.

Auth Forms

NkLogin

Demo Login

Mock authentication

Forgot password?
2FA Enabled
RBAC Ready

NkRegisterForm

Demo Registrazione

Mock registration form

Feedback

NkModal

NkLoadingSpinner

Size sm:

Size md with message:

Caricamento in corso...

Size lg:

Loading page

Form Components

Form components (NkTextField, NkSelectField, NkSwitchField, NkComboBoxField, NkFormField) require react-hook-form Controller integration via the control prop.

Integrate with react-hook-form using useNkForm hook

Example Form Section