A css-reactive vue component library using PrimeVue (Unstyled), shipped with the nychthemeron theme as a default.
Matthew L McPeak
23cb57420d
Two independent fixes: 1. Alert titles used text-<severity> directly on a bg-<severity>/15 tinted background. For danger (a very dark base hue) this reads as near-invisible text-on-tinted-background. The original PrimeVue-era Message design kept body/title text neutral and only accented the icon/left-border with the severity color -- restore that: alert text stays text-foreground, severity shows via a border-l-4 accent stripe instead of tinted text. 2. Root-caused why none of the last several fixes were showing up without a full `bun run build`: @nychthemeron/library's package.json exports its "." entry as ./dist/index.js unconditionally, and every story imports from the bare package specifier. So Storybook's dev server was always resolving to whatever the dist bundle looked like at last build time, never live source -- editing packages/library/src and restarting `bun run dev` (even with caches cleared) never picked up changes. Vite auto-injects a "development" resolution condition during `vite dev`/serve (and "production" during build), which is the standard fix for exactly this monorepo dev-vs-published split: added a "development" condition to the "." export pointing at src/index.ts, matching the pattern the "./components" sub-export already used. Also added the matching "@" alias to packages/playground/vite.config.ts, since resolving straight to library source pulls in its "@/lib/utils"-style internal imports, which playground's own Vite instance didn't previously know how to resolve. Verified both paths: dev server now reflects source edits without a library rebuild, and `bun run build` still produces a correct dist bundle with the same fix baked in. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> |
||
|---|---|---|
| .forgejo/workflows | ||
| .vscode | ||
| docs/superpowers | ||
| packages | ||
| .dockerignore | ||
| .editorconfig | ||
| .gitattributes | ||
| .gitignore | ||
| .oxlintrc.json | ||
| .prettierrc.json | ||
| bun.lock | ||
| env.d.ts | ||
| eslint.config.ts | ||
| package.json | ||
| README.md | ||
| tsconfig.json | ||
| tsconfig.node.json | ||
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 packagepackages/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