Install with shadcn

The site is a shadcn registry. shadcn add copies qnot's coss ui query builder, or a whole example, into your project as source you own, installs the npm packages it needs (@qnot/core, @qnot/react, lucide-react), and pulls the coss ui components it uses from coss's own registry.

Before you start

Your project needs Tailwind CSS v4 and a components.json. If you don't use coss ui yet, set it up first:

pnpm dlx shadcn@latest init @coss/style

Files land under components/qnot/ (your components alias), and their imports are rewritten to your aliases. Everything installed from this registry is MIT licensed.

The query builder

pnpm dlx shadcn@latest add https://coss.com/qnot/r/query-builder.json

'use client';
import { createQueryStore, defineFields, f } from '@qnot/core';
import { useState } from 'react';
import { CossQueryBuilder } from '@/components/qnot/query-builder';

const fields = defineFields({ name: f.text(), age: f.number({ min: 0 }), plan: f.enum(['free', 'pro']) });

export function Filters() {
  const [store] = useState(() => createQueryStore({ fields }));
  return <CossQueryBuilder store={store} showLock />;
}

Other UI kits

The builder also comes in shadcn/ui, MUI and plain-HTML variants, the ones on the UI kits page. Each one installs query-builder-core, the kit-agnostic builder they share (components/qnot/kits/shared), plus the kit's own controls:

pnpm dlx shadcn@latest add https://coss.com/qnot/r/query-builder-mui.json

'use client';
import { createQueryStore } from '@qnot/core';
import { useState } from 'react';
import { QueryBuilder } from '@/components/qnot/kits/mui';
import { fields } from './fields';

export function Filters() {
  const [store] = useState(() => createQueryStore({ fields }));
  return <QueryBuilder store={store} />;
}

An example

Every example is a registry block: the page shows its full source and the command to install it. Each example exports a Demo component:

pnpm dlx shadcn@latest add https://coss.com/qnot/r/product-filters.json

import { Demo as ProductFilters } from '@/components/qnot/examples/product-filters';

export default function Page() {
  return <ProductFilters />;
}

Every item

Items depend on each other where they share code, so installing an example brings the builder and helpers it uses. Running shadcn add again asks before overwriting files you've changed.