Nasaq

Install from npm

If you would rather take a versioned dependency than copy source, install the package. Everything ships as one package, @fadymondy/nasaq, with sub-path entry points.

If you would rather take a versioned dependency than copy source, install the package. Everything ships as one package, @fadymondy/nasaq, with sub-path entry points.

Status. The package is being prepared for its first release (0.1.0) and its own README is still a placeholder. Until it is on the npm registry, use the shadcn CLI route. The entry points below are the ones the package declares in its exports.

pnpm add @fadymondy/nasaq
# or: npm install @fadymondy/nasaq / yarn add @fadymondy/nasaq / bun add @fadymondy/nasaq

Peer dependencies: react and react-dom 19 or newer for the web kit. react-native, react-native-svg, expo-haptics and electron are optional and only needed for their entry points. The package is ESM only.

Entry points

ImportWhat it is
@fadymondy/nasaq/webAll web components, NasaqProvider, useNasaq, cn
@fadymondy/nasaq/web/styles.cssBase styles and component CSS
@fadymondy/nasaq/tokens.cssThe --nq-* custom properties
@fadymondy/nasaq/theme.cssTailwind v4 @theme mapping, so bg-nq-surface, text-nq-fg and friends exist
@fadymondy/nasaq/tokensThe same tokens as typed JavaScript
@fadymondy/nasaq/brandsBrand manifests and the official marks
@fadymondy/nasaq/nativeReact Native kit, same tokens
@fadymondy/nasaq/electronElectron window chrome (/main, /preload and /chrome.css too)

Wire up the styles

In your Tailwind entry CSS:

@import "tailwindcss";
@import "@fadymondy/nasaq/tokens.css";
@import "@fadymondy/nasaq/theme.css";
@import "@fadymondy/nasaq/web/styles.css";
@source "../node_modules/@fadymondy/nasaq/dist/web";

The @source line tells Tailwind to scan the package for class names. The path is relative to the CSS file; in a monorepo, point it at wherever the package is installed.

Use it

import { Button, NasaqProvider } from "@fadymondy/nasaq/web";

export function App() {
  return (
    <NasaqProvider brand="nasaq">
      <Button>Hello</Button>
    </NasaqProvider>
  );
}

Continue with Project setup for fonts and the theme script.

Versioning

Nasaq follows semantic versioning with the usual 0.x caveat: minor releases may change APIs, and every change is recorded in the changelog.

On this page