Installation · private GitHub registry
Install Onflow
Choose the source you need. Native shadcn installs its prerequisites automatically. The installed code belongs to your project.
Components are installed with the official shadcn CLI from the private GitHub repository nanonoir/miscellaneous-ui, using your own GitHub sign-in. Over this GitHub channel (shadcn CLI 4.21.1, pnpm, Chromium), a single item and the full catalog of each of the four collections were installed and built in three consumers (Next.js root, Next.js src with custom aliases and relocated CSS, Vite with custom aliases and relocated CSS), and a Button and a Dialog were rendered in each. These checks cover representative items and install pairs only, not every item, browser, package manager or project setup; access with a credential that lacks repository permission and the deployed showcase were not verified. The Registry freshness and schema workflow has since passed on GitHub Actions (Ubuntu, Node.js 24); that does not verify deployment protection. The collection notes below that mention a local HTTP registry describe earlier, separate checks.
1. Prepare your project
Requirements: React 19, TypeScript, Tailwind CSS 4 and configured shadcn. Supported: Next.js 16 and React with Vite.
GitHub access: install the GitHub CLI and sign in once with gh auth login. Your GitHub account must have read access to nanonoir/miscellaneous-ui: the CLI reads the repository with your credentials, and read access covers the whole repository and its history. Check the sign-in with gh auth status. No token belongs in components.json, in source or in a command.
No registry setup: the commands below use full nanonoir/miscellaneous-ui/<item> addresses. There is nothing to register and no server to start.
New project: create your Next.js or React/Vite application with the structure and package manager you prefer, then follow the official shadcn setup for Next.js or Vite.
Existing project: if shadcn is already configured, continue below. Otherwise, review the appropriate setup guide before changing existing files. Do not force reinitialization over your customizations.
Your components.json determines file destinations, aliases and the global stylesheet. Projects with or without src/ and custom destinations are supported; TypeScript and bundler aliases must agree. Monorepos and older React/Tailwind versions are not certified.
button, card, badge, input, textarea, checkbox, popover, select, dialog, tabs, tooltip, sonner, switch, radio-group, input-group, accordion, dropdown-menu, sheet, drawer, command, back-to-top, floating-actions, navbar, and navigation-dock are implemented: the full 24-component catalog is published, including the advanced viewport components. Setup alone installs no UI. Earlier checks used a local HTTP registry, not GitHub. All 24 categories were checked as a native install, build and render in three representative consumers (Next.js root, custom Next.js src aliases, and Vite/React with custom aliases), including Button alone, representative closures, the full bundle, both install orders with Default, Raw and PixelArt, preservation of Style, Shape, Layout and Motion overrides and of declined overwrites, light portals under dark ancestors and the Fontshare fallback. These checks are bounded (Chromium, pnpm, shadcn CLI 4.21.1): they are not a guarantee for every browser, framework version or project setup. Default, Raw and PixelArt certification does not certify Onflow.
2. Choose what to install
Choose Onflow setup, individual items or the full 24-component catalog, including the advanced viewport components. Additional patterns are separate choices. Shared capabilities are independent of the UI catalog.
Install command
Dependencies and required styles are included automatically. Run the command in your consumer project after signing in with gh auth login (see the preparation step).
Choose at least one item to generate an add command.
3. Use and customize
Import examples use common aliases. Substitute the aliases from your components.json; your project does not need these exact folders.
Optional ambient background: include pause and hidden-tab control
The atmosphere is static by default. The pure CSS opt-in data-onflow-ambient="on" runs indefinitely: do not enable it without an accessible, visible pause/resume control (WCAG 2.2.2) and a hidden-tab safeguard. Reduced motion alone is not a pause control. The recipe arrives with any Onflow UI component, not setup alone.
Copy this into ambient-control.tsx. It follows the example landing: enable only after hydration, pause in place while the tab is hidden, and preserve the user's pause choice when returning. Registry CSS keeps reduced motion static; the control hides in that mode.
"use client";
import { useEffect, useRef, useState } from "react";
import { Button } from "@/components/ui/onflow/button";
export function AmbientControl() {
const ref = useRef<HTMLButtonElement>(null);
const [paused, setPaused] = useState(false);
useEffect(() => {
const atmosphere = ref.current?.closest<HTMLElement>(".mui-onflow-atmosphere");
if (!atmosphere) return;
const sync = () => {
atmosphere.dataset.onflowAmbient = paused || document.hidden ? "paused" : "on";
};
sync();
document.addEventListener("visibilitychange", sync);
return () => document.removeEventListener("visibilitychange", sync);
}, [paused]);
return (
<Button ref={ref} variant="outline" aria-pressed={paused}
onClick={() => setPaused(!paused)} className="motion-reduce:hidden">
Pause animated background
</Button>
);
}Place the control inside its atmosphere, within your Onflow scope. Keep its toggle label stable: pressed means paused; activate again to resume. Omit the ambient attribute from the initial markup so server-rendered and no-JS pages stay static. Each atmosphere needs its own control.
import { AmbientControl } from "./ambient-control";
<div data-style="onflow" data-shape="onflow-brand">
<div className="mui-onflow-atmosphere overflow-hidden rounded-surface p-6">
<AmbientControl />
<h1>Work that flows</h1>
</div>
</div>