Installation

Initialize the theme, then add a component. The files land in your repo. That is the default.

CLI

Terminalbash
npx @neelshha/ui@latest init
npx @neelshha/ui@latest add glide-tabs

init writes ns.json, tokens.css, fonts.css, cx.ts, theme.tsx, and theme-provider.tsx. It looks for Next or Vite and picks src/components/ui when src exists.

Import tokens

Once, in your global CSS. If the project has a @/ alias (Next usually does), init prints that path:

globals.csscss
@import "@/components/ui/tokens.css";
@import "@/components/ui/fonts.css";

On Next you can skip the font import and self-host with next/font — set the --font-onest and --font-dm-mono variables the tokens read.

Vite often has no @/. Init will say so and print a path relative to a CSS file in src/:

globals.csscss
@import "./components/ui/tokens.css";
@import "./components/ui/fonts.css";

Component CSS is imported from the TSX. You do not import glide-tabs.css yourself.

Next.js

Inject THEME_SCRIPT with next/script before the page is interactive so the first paint is not wrong. Do not render a raw <script> from a React component — Next 16 will refuse it. Wrap the tree in ThemeProvider. Add suppressHydrationWarning on <html>.

layout.tsxtsx
import Script from "next/script";
import { ThemeProvider } from "@/components/ui/theme-provider";
import { THEME_SCRIPT } from "@/components/ui/theme";

<html lang="en" suppressHydrationWarning>
  <body>
    <Script id="ns-theme" strategy="beforeInteractive">
      {THEME_SCRIPT}
    </Script>
    <ThemeProvider>{children}</ThemeProvider>
  </body>
</html>

Vite or React

Same provider. Put ThemeScript first in the root, or paste the script into index.html. If @/ is missing, import the copied files with a relative path.

Appendix: package import

This repo also publishes @neelshha/ui if you want the package instead of copied source. Import tokens once. Component CSS arrives with the module. Vite and webpack need to transpile the TypeScript, or import a single file:

page.tsxtsx
import { GlideTabs, MorphMenu } from "@neelshha/ui";
import "@neelshha/ui/tokens.css";

// or
import { GlideTabs } from "@neelshha/ui/glide-tabs";

styles.css is an optional barrel if you want every component's CSS without importing the modules.