A css-reactive vue component library using PrimeVue (Unstyled), shipped with the nychthemeron theme as a default.
Matthew L McPeak
a2685c6920
Root cause: Tailwind's `duration-100` utility sets the literal CSS
`transition-duration` property (it's meant for transitions, not
animations). Since `transition-property`'s initial value is `all` and
nothing overrode it, every element using `duration-100` in its
Transition enter/leave-active-class picked up an unintended
`transition: all 100ms`. For SelectContent, whose `top`/`left` are set
via inline style from usePopoverPosition, this meant the popover's
real computed position (set synchronously on mount) got smoothly
interpolated from the reactive object's initial {top:0,left:0} default
-- visibly flying in from the top-left corner of the viewport before
landing in place.
Fix: use tw-animate-css's dedicated `animation-duration-*` utility
instead, which sets `animation-duration`/`--tw-animation-duration`
without ever touching `transition-property`/`transition-duration`.
Confirmed via computed-style inspection in headless Chromium that
transitionDuration is now 0s while the intended enter/exit keyframe
animation still runs for 100ms. Applied everywhere `duration-100` was
used for this pattern (DialogContent, DialogOverlay,
DialogScrollContent, SelectContent).
|
||
|---|---|---|
| .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