⚡Playground

Interactive Inputs

NkInput

This field is required

NkTextArea

Too short

NkCheckbox

NkSelect

Framework

NkSwitch

NkToggleGroup

Selected: dev / apps

NkNumberPicker

Stepper for numeric values.

NkHourPicker

Run backup at
Disabled

Selected: 03:00 (hour 3)

NkComboBox

Selected: react

NkEnvSelect

Select Environment

Selected: local

NkSearchFilter

Search query: None

NkConfigField

NkMultiSelect

A searchable multi-select dropdown. Selections render as removable chips in the trigger, and the popover has its own search box for filtering long option lists. Controlled via selectedValues / onChange, with options, error, isRequired, isDisabled and an optional leading icon. In real apps it powers tag, region, and permission pickers where several values apply at once.

Where this service is replicated

Selected: us-east-1, eu-west-1

NkReveal

A collapsible disclosure (wraps react-aria Disclosure). The triggerLabel toggles the hidden children; defaultExpanded controls the initial state. Use it for advanced/optional settings and secret values you want to keep tucked away in config forms.

postgresql://app:••••••@db.internal:5432/prod

Dynamic List Components (Abstracted Forms)

Abstracted list management components for dynamically adding, editing, and deleting rows without losing field focus. Each is controlled via value / onChange: NkKeyValueList holds a Record<string,string> (env-var editors), NkStringList a string[] (domains, volumes), and NkPortList a PortMapping[](port + protocol + firewall) — the building blocks of Nanokit's service config forms.

NkKeyValueList (Env Vars)

No items added.

{
  "API_KEY": "secret_value_123",
  "DEBUG": "true",
  "ENV": "production"
}
NkStringList (Volumes)
[
  "vol_data:/var/data",
  "vol_config:/etc/config"
]
NkPortList (Ports & Firewall)
Ports & UFW Firewall
:
UFW Firewall
:
UFW Firewall
:
UFW Firewall
[
  {
    "host": "80",
    "container": "80",
    "protocol": "tcp",
    "firewall": true
  },
  {
    "host": "443",
    "container": "443",
    "protocol": "tcp",
    "firewall": true
  },
  {
    "host": "53",
    "container": "53",
    "protocol": "udp",
    "firewall": false
  }
]