Nextcraft UI

Bold, crafted UI components for Next.js + Tailwind CSS.

Install

npm install @jameskabz/nextcraft-ui

Usage

import "@jameskabz/nextcraft-ui/styles.css";
import { CraftButton, GlassCard } from "@jameskabz/nextcraft-ui";

export default function Example() {
  return (
    <GlassCard tone="aurora" className="max-w-md">
      <h3 className="text-xl font-semibold">Nextcraft UI</h3>
      <p className="mt-2 text-sm text-white/80">
        Crafted components with a bold, modern edge.
      </p>
      <CraftButton className="mt-6">Launch</CraftButton>
    </GlassCard>
  );
}

Styles setup

This library ships a precompiled stylesheet. Import it once in your app’s global entry:

// App Router (Next.js)
import "@jameskabz/nextcraft-ui/styles.css";

Themes

Wrap your app once to enable theme switching:

import { ThemeProvider } from "@jameskabz/nextcraft-ui";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <ThemeProvider>
      {children}
    </ThemeProvider>
  );
}

Add a switcher anywhere in your UI:

import { ThemeSwitcher } from "@jameskabz/nextcraft-ui";

export function Settings() {
  return <ThemeSwitcher />;
}

Per-component theme override:

<GlassCard tone="ember">...</GlassCard>

Layout templates (config-driven)

You can drive the layout from JSON and reuse it across apps.

Example config:

{
  "sidebar": {
    "title": "Nextcraft",
    "items": [
      { "label": "Dashboard", "href": "/dashboard", "icon": "home" },
      { "label": "Projects", "href": "/projects", "icon": "folder" }
    ],
    "footerText": "Version 0.1.3"
  },
  "header": {
    "title": "Dashboard",
    "breadcrumb": [
      { "label": "Home", "href": "/" },
      { "label": "Dashboard" }
    ]
  }
}

Use it:

import {
  AppTemplate,
  CraftIconProvider,
  type LayoutConfig,
} from "@jameskabz/nextcraft-ui";
import { Home, Folder } from "lucide-react";

const layoutConfig: LayoutConfig = {
  sidebar: {
    title: "Nextcraft",
    items: [
      { label: "Dashboard", href: "/dashboard", icon: "home" },
      { label: "Projects", href: "/projects", icon: "folder" },
    ],
  },
  header: {
    title: "Dashboard",
    breadcrumb: [
      { label: "Home", href: "/" },
      { label: "Dashboard" },
    ],
  },
};

const icons = {
  home: <Home size={16} />,
  folder: <Folder size={16} />,
};

export default function Page() {
  return (
    <CraftIconProvider icons={icons}>
      <AppTemplate config={layoutConfig} getActivePath={() => "/dashboard"}>
        {/* content */}
      </AppTemplate>
    </CraftIconProvider>
  );
}

Notes:

• getActivePath can be replaced with activePath if you already know the path.
• Config schema is exported as layoutConfigSchema.
• An example file is in examples/layout-config.json.
• Demo page: src/app/layout-template-demo/page.tsx.

CraftIcon

CraftIcon uses Font Awesome (solid icons) by default. You can also register your own icons once and use them by name anywhere.

1) Install Font Awesome (required in your app)

npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome

2) Use built-in icon names

These names are supported out of the box:

• layout-dashboard, dashboard
• folder, folder-open
• users
• credit-card
• pen, edit
• trash, delete
• archive
• search

import { CraftIcon } from "@jameskabz/nextcraft-ui";

export function App() {
  return <CraftIcon name="pen" className="text-white" />;
}

3) Register your own icons (optional)

import { CraftIcon, CraftIconProvider } from "@jameskabz/nextcraft-ui";

const icons = {
  home: (
    <svg viewBox="0 0 24 24" className="h-4 w-4" fill="none" stroke="currentColor">
      <path d="M3 12l9-9 9 9v9a1 1 0 01-1 1h-5v-6H9v6H4a1 1 0 01-1-1z" />
    </svg>
  ),
};

export function App() {
  return (
    <CraftIconProvider icons={icons}>
      <CraftIcon name="home" className="text-white" />
    </CraftIconProvider>
  );
}

Troubleshooting: Module not found

If your app (for example, a folder named spendwise) shows:

Module not found: Can't resolve '@jameskabz/nextcraft-ui'

Do the following:

1. Ensure the package is installed in the app:

npm install @jameskabz/nextcraft-ui

2. If you are developing locally from this repo, build and install it from a path:

# in this repo
npm run build

# in your app (spendwise)
npm install ../nextcraft-ui

3. Verify the package exports point to the built files:

• This repo expects ESM at dist/index.js and CJS at dist/index.cjs.
• If you change build outputs, update package.json module and exports accordingly.

Scripts

• npm run build builds the library with tsup.
• npm run typecheck runs TypeScript checks.

License

MIT