npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

@citrusworx/juiceui

v0.3.0

Published

Juice is an attribute-driven styling library for CitrusWorx apps. It packages the compiled Juice stylesheet and a small JS entrypoint so applications can import shared tokens and styles from one place.

Downloads

59

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Maintainers

drewnitrodrewnitro

Keywords

Readme

@citrusworx/juiceui

Juice is an attribute-driven styling library for CitrusWorx apps. It packages the compiled Juice stylesheet and a small JS entrypoint so applications can import shared tokens and styles from one place.

Published Surface

The production package surface is intentionally small:

  • @citrusworx/juiceui
  • @citrusworx/juiceui/styles (core CSS only)
  • @citrusworx/juiceui/styles/themes/<id> (per-theme CSS)
  • the built artifacts in dist/

These are the stable consumer-facing entrypoints for the package.

Internal Workspace Assets

The Juice workspace also contains internal-only material that is not part of the published runtime contract:

  • src/native/ playground and experiments
  • src/templates/ HTML examples
  • src/tools/ compiler helpers
  • .mockups/ and test-results/
  • local build tooling like gulp.ts, vite.config.ts, and juice.config.yaml

Those are useful for monorepo development, but they are not part of the public API of @citrusworx/juiceui.

Install

yarn add @citrusworx/juiceui

Use the stylesheet

Core utilities and components (no theme identity):

import "@citrusworx/juiceui/styles";

Themes (Beta)

Breaking change: @citrusworx/juiceui/styles is core only. Import a theme stylesheet explicitly:

import "@citrusworx/juiceui/styles";
import "@citrusworx/juiceui/styles/themes/aquaflux";
<body theme="aquaflux">
  <!-- or theme="kiwipress" | theme="citrusmint" -->
</body>

Built files: dist/index.css (core), dist/themes/<id>.css (theme). Each theme is authored as <themeId>.scss + <themeId>.yaml under src/themes/<themeId>/. See docs/juice/juice-theme-authoring.md.

Responsive behavior

Built-in breakpoints, row collapse, and scaled spacing are documented in docs/juice/juice-responsive-reference.md.

Surfaces

Beta-stable: surfaceTone="soft". See docs/juice/juice-surfaces.md.

Motion (Beta)

Use the motion attribute for animations (for example motion="fade.in", motion="spin::fast"). See docs/juice/juice-animations.md.

Use the JS API

import {
  Accordion,
  createNavigation,
  initNavigation,
  startNavigationRuntime,
  stopNavigationRuntime,
  tokens
} from "@citrusworx/juiceui";

The top-level JS entrypoint is intentionally small. Those named exports are the stable runtime API Juice currently promises.

Use the built files directly

If you are hosting Juice assets yourself, the main built files are:

  • dist/index.css (core)
  • dist/themes/aquaflux.css, dist/themes/kiwipress.css, dist/themes/citrusmint.css
  • dist/index.js

Load core plus at least one theme CSS file when using theme="..." on the root element.

Example

<section stack gap="1" padding="2rem">
  <h1 font="bebas-neue" fontColor="obsidian-900">Juice</h1>
  <p font="lato" fontColor="gray-700">
    Attribute-driven styling from shared design tokens.
  </p>
  <button bgColor="green-500" hover="green-600" fontColor="white-100" padding="1rem">
    Get started
  </button>
</section>

What is implemented today

  • compiled CSS output at dist/index.css
  • compiled JS output at dist/index.js
  • color tokens and swatches
  • Google and Adobe font selectors
  • attribute selectors for color, spacing, width, height, gradients, shadows, and icons
  • layout primitives for stack, row, grid, gap, and span
  • FontAwesome Free icon integration across the solid, regular, and brands sets

Accessibility

Juice keeps styling attribute-first, but interactive patterns still need accessible relationships and names.

  • mobile nav toggles should expose an accessible name and control a sidebar with aria-controls
  • accordion triggers should use aria-expanded and aria-controls
  • accordion panels should be labeled regions when they contain meaningful content
<section accordion name="faq-account">
  <button
    id="faq-account-trigger"
    type="button"
    accordion-item
    aria-expanded="false"
    aria-controls="faq-account-panel"
  >
    How do I update billing?
  </button>

  <div
    id="faq-account-panel"
    role="region"
    aria-labelledby="faq-account-trigger"
    hidden
  >
    Update billing from the account dashboard.
  </div>
</section>

Browser Support

Juice currently targets modern evergreen browsers:

  • the last 2 Chrome versions
  • the last 2 Edge versions
  • the last 2 Firefox versions
  • the last 2 Safari major versions
  • iOS Safari 16.4+

The CSS build runs through autoprefixer against that package-level browserslist target, so supported-browser behavior is part of the build contract rather than an assumption.

Asset Policy

Juice ships a large compiled stylesheet plus the icon assets it references.

  • dist/index.css is the main published stylesheet artifact
  • dist/icons/ is intentionally published and contains the icon SVG payload used by the stylesheet
  • texture SVGs are inlined into the compiled CSS during build, so they do not ship as separate runtime files

Current release policy:

  • keep dist/index.css under the current artifact budget
  • keep dist/icons/ under a separate icon payload budget
  • avoid adding new runtime asset directories unless they are part of the published package contract

Optional config

Juice also includes an optional config surface at juice.config.yaml.

This is intended for describing project-level branding concerns like:

  • base colors and swatches
  • typography roles
  • experimental integration options

Juice can also generate full theme artifacts from config.

Library-owned themes can still come from src/themes/<id>/<id>.config.yaml. The generator writes those derived theme contracts into src/.generated/themes/<id>/ and the build automatically compiles them into dist/themes/<id>.css.

App-owned themes can be generated from an app config and committed or imported locally:

yarn workspace @citrusworx/juiceui generate:themes --config ../../apps/blackwatersound/front/juice.theme.yaml --css-out ../../apps/blackwatersound/front/src/generated/blackwatersound-theme.css

That lets an app keep its brand config while still relying on Juice for spacing, layout, surfaces, and responsive structure.

Config is not required to use Juice. The most stable current entrypoint is still the compiled stylesheet plus the existing attribute system.

Generate/discover themes directly with:

yarn workspace @citrusworx/juiceui generate:themes

Build

yarn workspace @citrusworx/juiceui build

The build runs:

  • gulp.ts to compile src/juice.scss into dist/index.css
  • vite to build the JS entrypoint into dist/index.js

Release

Before publishing a new Juice release, run:

yarn workspace @citrusworx/juiceui verify

That is the minimum publish gate for Juice right now. It rebuilds the package and reruns the package/runtime test suite so the published artifacts, accessibility runtime behavior, and package contract are all checked together.

Release notes and versioning should continue to flow through Changesets. The package changelog is consumer-facing and should describe behavior, package contract changes, and dependency updates in plain language instead of internal-only notes.

Docs

Internal project docs live in docs/juice/.