Nyx Kit

Nyx Kit is a lightweight and flexible developer kit for building Vue applications. It provides a cohesive set of reusable components, utilities, and patterns designed for modern, performant, and scalable applications.

Documentation

For more detailed information, usage examples, and live demos of components, visit the Storybook documentation.

Installation

pnpm add nyx-kit

Plugin setup

// main.ts
import { createApp } from 'vue'
import { NyxKit, NyxColourMode } from 'nyx-kit'
import 'nyx-kit/style.css'
import App from './App.vue'

createApp(App)
  .use(NyxKit, {
    colourMode: {
      mode: NyxColourMode.Dark, // 'dark' | 'light' | 'adaptive'
    }
  })
  .mount('#app')

Colour mode

Three modes are available:

| Mode | Behaviour | |------|-----------| | NyxColourMode.Dark | Always dark — the default | | NyxColourMode.Light | Always light | | NyxColourMode.Adaptive | Clock-driven: light 06:00–20:00, dark otherwise |

Switch modes at runtime with the useNyxColourMode composable:

import { useNyxColourMode, NyxColourMode } from 'nyx-kit/composables'

const { mode, isDark, isLight, setMode } = useNyxColourMode()

setMode(NyxColourMode.Light)    // override for this session
setMode(NyxColourMode.Adaptive) // hand control back to the clock

The chosen mode is persisted to localStorage and restored on next load. The composable works without the plugin — NyxKit.install() is optional.

Programmatic confirmation dialog

Use NyxKit.confirm() to display a confirmation dialog and await the user's response:

import { NyxKit, NyxTheme } from 'nyx-kit'

const result = await NyxKit.confirm({
  theme: NyxTheme.Danger,
  title: 'Delete Item',
  message: 'Are you sure you want to delete this item? This action cannot be undone.',
  confirmText: 'Delete',
  cancelText: 'Cancel'
})

if (result.isSuccess) {
  // User clicked Confirm
  console.log('Confirmed!')
} else {
  // User clicked Cancel, pressed Escape, or clicked the backdrop
  console.log('Cancelled')
}

Options:

| Option | Type | Default | Description | |--------|------|---------|-------------| | theme | NyxTheme | Primary | Theme for the confirm button | | title | string | '' | Modal header text | | message | string | (required) | Modal body content | | confirmText | string | 'Confirm' | Confirm button label | | cancelText | string | 'Cancel' | Cancel button label |

The method returns a NyxResult — use .isSuccess to check the outcome.

ESLint

Nyx Kit ships a shareable ESLint flat config. To adopt the same rules in your project:

1. Install the peer dependencies

pnpm add -D eslint eslint-plugin-vue @vue/eslint-config-typescript eslint-plugin-oxlint

2. Extend the config

// eslint.config.ts
import nyxConfig from 'nyx-kit/eslint'

export default [
  ...nyxConfig,
  {
    // your project-specific overrides
  },
]

The config includes:

• eslint-plugin-vue — Vue 3 essential rules
• @vue/eslint-config-typescript — TypeScript recommended rules
• eslint-plugin-oxlint — disables ESLint rules that oxlint handles (use alongside oxlint for faster linting)

Test-framework rules (@vitest/eslint-plugin, eslint-plugin-playwright) are not included — add those yourself if needed.

Features

• Modular and extensible – Use only what you need, with easy customization.
• Consistent and themeable – Provides a unified design system with full theming support.
• Optimized for Vue 3 – Built with modern best practices for performance and efficiency.
• Lightweight and fast – Designed to be minimal and performant, avoiding unnecessary bloat.

Goals

• Provide a simple and elegant developer experience
• Focus on flexibility without unnecessary complexity
• Maintain lightweight and performant solutions

Status

Nyx Kit is currently in early development. The foundational components and utilities are being defined, and API stability may change. As the project evolves, more features, documentation, and best practices will be introduced.

Planned Features & Components

Component Extensions

• NyxInput
  • type="number": Add a stepper to increment/decrement value.
  • type="datetime": Support a custom date/type system (module?).
  • type="color": Support a custom color picker (module?).
• NyxTable: Add sorting.
• NyxSlider: Add direction (row,column), add shape (thumb), add track highlight between min and value.

New Core Components

• NyxDropdown: A menu for selecting one option from a list.
• NyxAccordion: A collapsible container for displaying content in an expandable/collapsible format.
• NyxToast: A temporary notification popup.
• NyxSkeleton: A placeholder loading animation for components.
• NyxRadioGroup: A set of radio buttons for multiple-choice selection.
• NyxColorPicker: A color selection tool.
• NyxAudioPlayer: A customizable audio player.
• NyxVideoPlayer: A customizable video player.
• NyxTree: A hierarchical list component for nested structures.
• NyxDraggable: A drag & drop helper component.

New Modular Components

NyxChronos - Date & Time

• NyxDateTimePicker: A combined date and time selection component, allowing users to pick both values in a single interface. Supports presets, custom formatting, and time zone handling.
• NyxCalendar: A versatile and interactive calendar component for displaying events, scheduling tasks, and managing dates.

NyxCodex - Rich Content

• NyxEditor: A full-featured rich text (WYSIWYG) editor, allowing users to format text, insert media, and manage content seamlessly. Supports markdown, HTML, or raw text modes, with plugins for advanced features like mentions, tables, and code blocks.
• NyxDocViewer: A document viewer for PDF, DOC, DOCX, and potentially other file formats. Enables smooth document navigation, zooming, search functionality, and optional annotation or commenting features.
• NyxWhiteboard: A collaborative, free-drawing canvas.

NyxWarp - Productivity / Launcher / PowerUser

• NyxCommandPalette: A quick-search interface for command execution. Similar to VS Code’s Ctrl+P or macOS' CMD+SPACE.
• NyxLaunchpad: A grid or list of shortcuts to different sections of your app. Similar to macOS Launchpad or the Windows Start menu.

NyxNexus - Collaboration / Social

• NyxChat: A lightweight chat/messaging component.
• NyxCommentBox: A threaded comment system for discussions.

NyxPrism - Data Visualization

• NyxChart: A wrapper for visualizing data (bar, line, pie, etc.).
• NyxHeatmap: A specialized chart for visualizing trends.
• NyxTimeline: A component for displaying events in chronological order.

NyxVault - Files and Folders

• NyxFileManager: A flexible and intuitive file and asset management component for organizing, browsing, and handling files within an application.
• NyxFileUpload: A drag-and-drop or button-based file uploader. Supports multiple file selection, progress tracking, and optional preview functionality.

NyxTerra - Geospatial / Mapping Tools

• NyxMap: An interactive map component (e.g., for locations).