@marufhosen-cdda/biwd-api-key-card

A small, self-contained React component that validates an API key against a built-in expected value (BIWD-1234) and renders the result in a status card. Framework-agnostic — works in Next.js, Vite, Create React App, Remix, Astro (React), and any other React project.

• ✅ Ships CommonJS and ESM builds plus TypeScript declaration files.
• ✅ react and react-dom are declared as peer dependencies.
• ✅ Bundled with tsup for fast, zero-config builds.
• ✅ Zero runtime dependencies beyond React.

Installation

npm install @marufhosen-cdda/biwd-api-key-card
# or
pnpm add @marufhosen-cdda/biwd-api-key-card
# or
yarn add @marufhosen-cdda/biwd-api-key-card
# or
bun add @marufhosen-cdda/biwd-api-key-card

react and react-dom are peer dependencies. If your project doesn't already have them, install them too:

npm install react react-dom

Requirements

| Tool | Version | | --- | --- | | Node.js | >= 18 | | React | >= 18 (peer) |

Quick start

import { ApiKeyCard } from "@marufhosen-cdda/biwd-api-key-card";

export default function Page() {
  return <ApiKeyCard apiKey="BIWD-1234" />;
}

The card renders a green ✓ "Valid" badge when the supplied key matches the built-in expected key, and a red ✕ "Invalid" badge otherwise.

Examples

// Valid — green badge
<ApiKeyCard apiKey="BIWD-1234" />

// Invalid — red badge
<ApiKeyCard apiKey="not-the-right-key" />

// In a real app, pass a key from props / state / env
function Settings({ token }: { token: string }) {
  return <ApiKeyCard apiKey={token} />;
}

API

ApiKeyCardProps

| Prop | Type | Required | Description | | --- | --- | --- | --- | | apiKey | string | yes | The API key to validate against the built-in expected value. | | className | string | no | Extra Tailwind classes appended to the card wrapper. |

Constants

| Export | Value | Description | | --- | --- | --- | | VALID_API_KEY | "BIWD-1234" | The key this package treats as valid. Exposed so callers can reference it instead of duplicating the string. |

Behaviour notes

• Comparison is strict equality (===): no trimming, no case folding, no normalization. "biwd-1234" and " BIWD-1234 " are both invalid.
• The component is pure — it makes no network calls and has no side effects.
• The data-valid attribute ("true" / "false") is rendered on the wrapper for testability and CSS hooks.

Styling

ApiKeyCard ships with Tailwind CSS classes baked in for layout, spacing, colour, and dark mode. The card uses neutral colours by default and works in both light and dark themes via dark: variants.

To use it without Tailwind, the component will still render, but layout/spacing/colour will not be applied. You can override everything via the className prop:

<ApiKeyCard
  apiKey={token}
  className="my-card border-2 border-blue-500 p-8"
/>

If you want the default styling preserved, make sure Tailwind can see this package's output by adding it to your content paths:

// tailwind.config.ts
export default {
  content: [
    "./app/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./node_modules/@marufhosen-cdda/biwd-api-key-card/dist/**/*.{js,mjs}",
  ],
};

Bundler compatibility

The package.json exposes all the entries modern bundlers look for:

{
  "main": "./dist/index.js",       // CJS entry
  "module": "./dist/index.mjs",    // ESM entry
  "types": "./dist/index.d.ts",    // TypeScript declarations
  "exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "import": "./dist/index.mjs",
      "require": "./dist/index.js"
    },
    "./package.json": "./package.json"
  },
  "sideEffects": false
}

• Next.js picks up the exports map automatically (App Router ≥ 13).
• Vite prefers the module field for ESM and falls back to main for CJS.
• Webpack 5+, Rollup, esbuild, and Parcel all honour exports.
• sideEffects: false lets bundlers tree-shake unused exports.

Scoped packages: because this package is published under the @marufhosen-cdda scope, the npm CLI defaults to private access. The first publish needs --access public so anyone can install it.

Local development

Clone the repo and link it into your app:

git clone https://github.com/marufhosen-cdda/biwd-api-key-card.git
cd biwd-api-key-card
npm install
npm run build         # one-shot production build into dist/
npm run dev           # watch mode (tsup --watch)
npm run typecheck     # tsc --noEmit
npm run pack:dry      # npm pack --dry-run — preview the published tarball

Project layout

.
├── src/
│   ├── components/
│   │   └── ApiKeyCard.tsx   # the component
│   └── index.ts             # public entry point
├── dist/                    # build output (generated)
├── LICENSE                  # MIT license
├── README.md
├── package.json
├── tsconfig.json
└── tsup.config.ts

Publishing

The package is configured to be published to the public npm registry.

One-time setup

1. Create an account at npmjs.com (if you haven't already).
2. Enable Two-Factor Authentication in your account settings (passkey, TOTP, or security key).
3. Log in from your terminal:

   npm login

4. Confirm you're logged in as the right user:

   npm whoami

Release checklist

# 1. Make sure everything builds and types check
npm install
npm run typecheck
npm run build

# 2. Preview what will be published
npm pack --dry-run
# or
npm run pack:dry

# 3. Bump the version (choose one)
npm version patch   # 1.0.0 → 1.0.1
npm version minor   # 1.0.0 → 1.1.0
npm version major   # 1.0.0 → 2.0.0

# 4. Publish — `prepublishOnly` runs `npm run build` automatically
npm publish --access public

After publishing, your package is live at https://www.npmjs.com/package/@marufhosen-cdda/biwd-api-key-card and installable by anyone via npm install @marufhosen-cdda/biwd-api-key-card.

License

MIT © 2026 marufhosen-cdda