Getting started

Install

pnpm add @flanksource/clicky-ui react react-dom tailwindcss

Import the library stylesheet once at the application root, then prefer the smallest public subpath for each component:

import { Button } from "@flanksource/clicky-ui/components";
import { ThemeProvider, DensityProvider } from "@flanksource/clicky-ui/hooks";
import "@flanksource/clicky-ui/styles.css";

export function App() {
  return (
    <ThemeProvider>
      <DensityProvider>
        <Button variant="default">Continue</Button>
      </DensityProvider>
    </ThemeProvider>
  );
}

Package entry points

Import	Purpose
@flanksource/clicky-ui/components	Inputs, forms, pickers, menus, layout, and overlays
@flanksource/clicky-ui/data	Tables, cards, trees, code, markdown, and data-detail views
@flanksource/clicky-ui/hooks	Theme, density, and shared hooks
@flanksource/clicky-ui/icons	Offline component icon exports
@flanksource/clicky-ui/rpc	OpenAPI operation and entity explorer surfaces
@flanksource/clicky-ui/chat	Chat and session UI
@flanksource/clicky-ui/ai	AI runtime and prompt controls
@flanksource/clicky-ui/jotai	Atom-backed adapters for controlled components
@flanksource/clicky-ui/expressions	Monaco language registration, completion, and hover support
@flanksource/clicky-ui/expressions/playground	React expression editor and evaluation panels

Use subpath imports to keep the consumer’s entry surface explicit. Expression support lives in the two dedicated entry points above; see the expression guide for editor registration and playground API setup.

Markdown fields

The rich markdown form field is lazy-loaded and its CSS is intentionally separate. Applications that use format: "md" must add:

import "@flanksource/clicky-ui/mdx-editor.css";

The editor also requires the optional @mdxeditor/editor peer dependency.