nychthemeron

A CSS-reactive Vue component library built on PrimeVue (Unstyled), shipped with the nychthemeron theme as a default.

About

nychthemeron provides a curated set of Vue 3 components powered by PrimeVue's unstyled components and the nychthemeron theme system. This approach gives you complete control over component styling while maintaining a consistent, polished design language out of the box.

Features

• CSS-Reactive: Components respond to CSS changes without requiring JavaScript updates
• PrimeVue Powered: Built on the robust, accessible PrimeVue unstyled component library
• Theme Included: Ships with the nychthemeron theme, ready to use immediately
• TypeScript: Full type support for Vue 3 and TypeScript projects
• Customizable: Override or extend the default theme to match your design system

Quick Start

Installation

npm install @nychthemeron/library primevue vue@^3.5.0

Basic Usage

Import the library components and styles:

<script setup lang="ts">
import { NychButton } from '@nychthemeron/library'
</script>

<template>
  <NychButton label="Click me" />
</template>

<style>
@import '@nychthemeron/library/style';
@import '@nychthemeron/library/theme';
</style>

Components

• NychButton - Customizable button component

More components coming soon.

Customization

Using the Default Theme

The nychthemeron theme is included by default:

@import '@nychthemeron/library/theme';

Custom Styling

Override or extend component styles by importing only the base styles and providing your own CSS:

@import '@nychthemeron/library/style';

/* Your custom theme */
:root {
  --primary-color: #your-color;
  /* More CSS variables */
}

Project Structure

This is a monorepo containing:

• packages/library - The component library package
• packages/playground - Development environment and examples

Development

Setup

bun install

Development Server

Start the playground to develop and test components:

bun dev

Build

Build the library for production:

bun build

Testing

Run unit tests:

bun test

Linting and Formatting

bun lint       # Check and fix linting issues
bun format     # Format code with Prettier
bun type-check # Run TypeScript type checking

Requirements

• Node.js: >=20.19.0 or >=22.12.0
• Vue: ^3.5.0
• PrimeVue: ^4.5.0

Browser Support

Supports all modern browsers with CSS Grid and CSS Variables support.

License

MIT