@neerajcodz/tonyui

Tony's React 18 component library and Tailwind CSS 3 design system. Import components individually; there is no root barrel.

Install

npm install @neerajcodz/tonyui react@^18.3.1 react-dom@^18.3.1
npm install -D tailwindcss@^3.4 autoprefixer

The package ships TypeScript and TSX source, including its types and "use client" directives. Use a bundler that transpiles package source, such as Vite. In Next.js, add transpilePackages: ["@neerajcodz/tonyui"] to the Next configuration.

Add Tony's preset and scan its source in your Tailwind configuration:

// tailwind.config.ts
import type { Config } from "tailwindcss";
import tonyPreset from "@neerajcodz/tonyui/tailwind-preset";

export default {
  presets: [tonyPreset],
  content: [
    "./index.html",
    "./src/**/*.{ts,tsx}",
    "./node_modules/@neerajcodz/tonyui/src/**/*.{ts,tsx}",
  ],
} satisfies Config;

Import the styles before the Tailwind directives in your application stylesheet. Use a bundler or CSS import processor that resolves package imports.

@import "@neerajcodz/tonyui/fonts.css";
@import "@neerajcodz/tonyui/styles.css";
/* Include this when using the rich text editor. */
@import "@neerajcodz/tonyui/styles/editor.css";

@tailwind base;
@tailwind components;
@tailwind utilities;

The font stylesheet includes self-hosted Chakra Petch, Oxanium, JetBrains Mono and Share Tech Mono, with their original OFL licenses. The npm artifact includes these assets and font tokens. Set the dark class on your root element to enable dark mode.

import { Button } from "@neerajcodz/tonyui/components/button";
import { ThinkingOrb } from "@neerajcodz/tonyui/components/thinking-orb";

export function AssistantAction() {
  return (
    <Button loading spinner={<ThinkingOrb state="searching" size="xs" tone="inverse" decorative />}>
      Searching notes
    </Button>
  );
}

Components, hooks and helpers retain their individual subpaths, for example @neerajcodz/tonyui/components/charts/area-chart, @neerajcodz/tonyui/hooks/use-controllable-state and @neerajcodz/tonyui/lib/utils.

Maintainer releases

The monorepo consumes the private @tony/ui workspace. bun run --cwd packages/ui prepare:npm prepares the public @neerajcodz/tonyui distribution in packages/ui/dist/npm, using the version in packages/ui/package.json. Only source, release documentation and bundled font files enter the distribution; workspace dependencies and development scripts are removed. The scoped name avoids npm's conflict with the existing tony-ui package.

Add a GitHub repository Actions secret named NPM_UI_PUBLISH_TOKEN, containing an npm granular access token permitted to publish @neerajcodz/tonyui with bypass 2FA enabled. The workflow exposes it only to the final npm publish step. See npm's CI token instructions.

After merging the version change to main, tag that commit and push the tag:

git tag ui-v1.0.1
git push origin ui-v1.0.1

.github/workflows/ui-release-npm.yml validates the tag against the package version, runs checks, packs the artifact, installs it in a standalone consumer and publishes that exact tarball. Tags must point to commits reachable from main. Stable versions publish under latest; prereleases such as 1.1.0-beta.1 publish under next.

The UI Release (npm) workflow can also run manually from main with an existing UI tag. Select dry_run to validate and upload the tarball without publishing. Pull requests automatically validate packaging and the standalone consumer without access to the npm publish token.

The first scoped release is 1.0.1, tagged ui-v1.0.1. Each release requires a new SemVer package version without build metadata (+...). Re-running a successful publish with the same version fails because npm versions are immutable.

Local package verification:

bun run --cwd packages/ui prepare:npm
cd packages/ui/dist/npm
npm pack --ignore-scripts
cd ../../../..
node packages/ui/scripts/check-npm-package.mjs packages/ui/dist/npm/neerajcodz-tonyui-1.0.1.tgz