docs/docs/en/shared-components/index.md
NocoBase client v2 includes a set of shared components. When building plugin pages, settings pages, or forms, you can use these components directly to reuse NocoBase UI and interactions.
This section groups components by usage scenario. Each page covers one component: when to use it, its common API, and whether it can be previewed in the docs.
| I want to... | Where to look |
|---|---|
| Control the low-level full-screen scanner | CodeScanner |
| Put a standard form in a dialog | DialogFormLayout |
| Put a standard form in a drawer | DrawerFormLayout |
Allow only $env environment variables | EnvVariableInput |
| Enter a file size and store it as bytes | FileSizeInput |
| Edit JSON / JSON5 configuration | JsonTextArea |
| Enter a password with a strength indicator | PasswordInput |
| Load Select options asynchronously from an API | RemoteSelect |
| Add scanning support to an input | ScanInput |
| Allow a field to accept both constants and variables | TypedVariableInput |
Let a single-line field accept variables such as {{ $env.X }} and {{ $user.name }} | VariableInput |
| Insert variables into JSON / JSON5 configuration | VariableJsonTextArea |
| Let multi-line text accept variables | VariableTextArea |
| Filter a Collection with multiple conditions | CollectionFilter |
| Embed a Collection filter panel in a page | CollectionFilterPanel |
| Customize the draggable row of an antd Table | SortableRow |
| Customize the drag handle column of a Table | SortHandle |
| Display lists, select rows, and drag-sort rows on settings pages | Table |
| Use Ant Design icons or register custom icons | Icon |
| Create an internal registry for plugin extension items | createFormRegistry |
Import the components you need in a client plugin, then use them like regular React components:
import { RemoteSelect, Table } from '@nocobase/client-v2';
function SettingsPage() {
return (
<>
<RemoteSelect request={loadOptions} />
<Table rowKey="id" columns={columns} dataSource={records} />
</>
);
}
Use React + Antd by default. Check these components first for common NocoBase plugin scenarios:
For ordinary inputs, buttons, and messages, Antd components are usually clearer.