@vef-framework-react/components is the UI component library for VEF Framework. It is built on top of Ant Design 6.x and extends it with layout primitives, permission-aware components, a CRUD stack, and a type-safe form system — while re-exporting the rest of Ant Design unchanged.
Every component lives in exactly one of the groups below. Components marked VEF are original or meaningfully enhanced; everything under Ant Design Pass-Through is a thin, behavior-identical re-export.
Layout
| Component | Description |
|---|
Grid | Responsive auto-fill grid with collapse support |
Stack | Vertical flex stack layout |
Center | Centered flex layout |
Group | Horizontal flex layout |
ScrollArea | Custom scrollbar area with scroll event callbacks |
FlexTabs | Height-filling Tabs variant — the tab bar stays fixed and the active pane stretches to the remaining space |
Labeled | Label-on-top wrapper with label/group a11y semantics, aligning non-form controls with vertical form items |
Page & CRUD
| Component | Description |
|---|
Page | Primary business-page container with aside panels, header, and footer |
FlexCard | Semantic Card wrapper for split-card and tree-table layouts |
FormModal | Modal that combines form state, mutation, and submit/reset actions |
FormDrawer | Same as FormModal, rendered as a side drawer |
ProSearch | Search-form container with basic/advanced areas and search/reset actions |
ProTable | Page-level table with built-in query, pagination, row selection, and column settings |
Table | The underlying data table, with flexHeight and pagination helpers |
Crud and CrudPage | Combines ProSearch + ProTable + scene forms + delete mutations into one CRUD state model |
EditableTable | Controlled, inline-editable table — editing, adding, and deleting rows are operations on a value array |
| Component | Description |
|---|
Form | Type-safe form system built on @tanstack/react-form (useForm, form.AppField, field components) |
Bool | Boolean value display/input with switch, radio, radio-button, and checkbox variants |
Select | Dropdown selector, enhanced with useDataOptionsSelect for remote/code-set options |
Tree | Tree view, enhanced with useDataOptionsTree |
TreeSelect | Tree-structured dropdown, enhanced with useDataOptionsTreeSelect |
Upload | File upload with inline image cropping |
FileUpload | Chunked, resumable upload variant of Upload, wired to the framework's storage protocol |
IconPicker | Searchable popup grid for choosing a lucide icon |
GenericSelect | Abstract base for popup-driven selection controls — the foundation IconPicker is built on |
Labels | Key-value label display, editor, and filter input (LabelsDisplay, LabelsEditor, LabelFilterSelect) — moved from @vef-framework-react/approval in v2.12.0 |
Actions & Permissions
| Component | Description |
|---|
ActionButton | Button with built-in async loading and confirm dialog |
ActionGroup | Renders a group of action buttons from a config array |
OperationButton | ActionButton + PermissionGate combined |
PermissionGate | Conditionally renders children based on permissions |
Display & Utility
| Component | Description |
|---|
ConfigProvider | VEF's global theme provider — dark mode, semantic colors, CSS variables |
| Notifications & Messages | Imperative feedback helpers — showSuccessMessage, showErrorNotification, showConfirm, and friends |
IconButton | Icon-only button with tooltip |
Loader | Full-screen or inline loading indicator |
Icon | Renders a Lucide icon component passed as a prop |
DynamicIcon | Renders a Lucide icon by name string |
LogoIcon | The VEF framework logo as an SVG component |
Chart | ECharts wrapper with theme support and chart linking |
CodeHighlighter | Syntax-highlighted code block |
CodeEditor | CodeMirror 6 code editor with syntax highlighting and an imperative ref API |
Keyboard | Keyboard shortcut key display |
FilePreview | Contract for application-provided file preview hosts (FilePreviewProvider, useFilePreview) — Upload dispatches non-image previews to it (v2.11.0) |
| Utility Exports | Non-component exports — breakpoints, color/size/scene design-token constants, globalCssVars, useThemeTokens, query metadata symbols, and misc helpers |
Animation
| Component | Description |
|---|
FlipText | Character flip animation |
SparklesText | Text with sparkle particle effects |
SplitText | GSAP-powered text split animation |
TypingAnimation | Typewriter effect animation |
BorderBeam | Decorative animated beam that travels along a container's border (antd re-export) |
Ant Design
Components documented on their own page because they carry VEF-specific notes (props, form integration, or usage guidance) beyond straight pass-through:
| Component | Description |
|---|
Button | Trigger operations |
Input | Text input field (Input.Password, Input.TextArea, Input.Search, Input.OTP) |
Modal | Dialog overlay |
Alert | Alert message |
Avatar | User avatar |
Typography | Title / Text / Paragraph / Link |
Compact | Space.Compact — groups inputs/buttons into a seamless unit |
Everything else from Ant Design is a straight, unmodified re-export — see the Ant Design Pass-Through index.
Hooks Exported by This Package
@vef-framework-react/components also exports hooks. Each is documented on its host component's page:
| Hooks | Documented on |
|---|
useForm, useFormContext, useFormStore, createFormOptions, withForm, withFieldGroup | Form |
useDataOptionsSelect, useCodeSetOptionsSelect | Select |
useDataOptionsTreeSelect | TreeSelect |
useDataOptionsTree | Tree |
usePaginationProps | Table |
useGridCollapsed | Grid |
usePageEntranceEffect, usePageEntranceSettled, useViewportHeight | Page |
useThemeTokens | Utility Exports |
useIsDarkMode | ConfigProvider |
useFilePreview | FilePreview |
useChart, connectCharts, disconnectCharts | Chart |
Hooks from @vef-framework-react/hooks (permissions, code sets, upload, debounce, …) are indexed separately in VEF Hooks.
Installation
pnpm add @vef-framework-react/components
Basic Usage
import { Button, Table, ActionButton } from '@vef-framework-react/components';
All components are tree-shakeable via named exports.