⚡ Phoenix Glow

A neon-glow React component kit + CSS system. Buttons, cards, navbar, modal, pricing, and form primitives with animated phoenix glows.

@sj-master/phoenix-glow · React 18+ · MIT · by PHX-IT

Install

npm install @sj-master/phoenix-glow

Use

Import the stylesheet once (e.g. in your app entry), then use the components:

import "@sj-master/phoenix-glow/css";
import { Button, GlowButton, Card, Navbar, PricingCard } from "@sj-master/phoenix-glow";

export default function App() {
  return (
    <>
      <Button variant="primary">Get started</Button>
      <GlowButton>Glow</GlowButton>
      <Card title="Phoenix" description="Fire meets function." />
    </>
  );
}

Styling note: components use Tailwind utility classes alongside the Phoenix Glow stylesheet. Use them in a Tailwind-enabled project (or include Tailwind), and always import @sj-master/phoenix-glow/css for the glow tokens, animations, and phoenix-* classes.

Components

| Component | Purpose | |-----------|---------| | Button | Primary / secondary button with loading state | | GlowButton | The signature animated neon-glow button | | Card | Content card with title, description, image, action | | PricingCard | Pricing tier card | | Navbar | Top navigation with logo + links | | Modal | Accessible dialog | | Input | Form text input | | Badge | Status / label pill | | Avatar | User avatar | | GridSection | Responsive grid of items | | InteractiveFontShowcase | Typography specimen |

All prop types are exported (e.g. ButtonProps, CardProps, …).

Develop

npm install
npm run build      # tsup → dist (ESM + CJS + .d.ts + styles.css)
npm run typecheck

The build emits dist/index.js (ESM), dist/index.cjs (CJS), dist/index.d.ts (types), and dist/styles.css (the stylesheet, from src/styles/phoenix-glow.css).

Publish

npm run build
npm publish        # public scoped package (publishConfig.access = public)

License

MIT © 2026 Skyler J. Jones (PHX-IT). See LICENSE.