Skip to main content

Ant Design Pass-Through

@vef-framework-react/components re-exports most of Ant Design directly. These components carry no VEF-specific behavior or prop changes — import them from @vef-framework-react/components and use them exactly as documented on the Ant Design site.

Of the components with their own pages, Modal (adds draggable), Table (adds flexHeight/striped), and Upload (adds enableCrop/pastable) genuinely extend antd. Button, Input, Alert, Avatar, Typography, Compact, and BorderBeam are bare antd re-exports too — they get dedicated pages for discoverability, not because VEF changes their behavior. Empty in the table below is also not an unmodified pass-through: VEF overrides its default image to antd's PRESENTED_IMAGE_SIMPLE. For components that genuinely gain VEF-specific props, hooks, or behavior, or that are VEF-original, see the Components Overview.

import { Affix, Card, Tabs, Tag } from '@vef-framework-react/components';
ComponentDescriptionAnt Design docs
AffixStick an element to the viewport.Affix
AnchorHyperlinks to sections on a page.Anchor
AutoCompleteAn input with autocomplete suggestions.AutoComplete
BadgeDisplays a count or status on an element.Badge
BreadcrumbShows the current page location within a hierarchy.Breadcrumb
CalendarDisplays dates in a calendar format.Calendar
CardA container for grouping related content.Card
CarouselA slideshow cycling through elements.Carousel
CascaderSelect from a hierarchical list of options.Cascader
CheckboxA checkbox for selecting multiple options.Checkbox
ColA grid column container.Col
CollapseCollapsible content sections.Collapse
ColorPickerA color picker input.ColorPicker
DatePickerSelect a date or date range.DatePicker
DescriptionsDisplay multiple read-only fields in groups.Descriptions
DividerA visual divider between content.Divider
DrawerA panel that slides in from the edge.Drawer
DropdownA dropdown menu triggered by a button.Dropdown
EmptyAn empty-state placeholder; VEF presets image to PRESENTED_IMAGE_SIMPLE.Empty
FlexA flex layout container.Flex
FloatButtonA floating action button.FloatButton
ImageAn image with preview support.Image
InputNumberA numeric input field.InputNumber
ListDisplay a list of items.List
MentionsMention someone in a text input.Mentions
MenuA navigation menu for page routing.Menu
PaginationPagination control for long lists.Pagination
PopconfirmA confirmation popover on an element.Popconfirm
PopoverA floating card triggered by click.Popover
ProgressDisplay the current progress of an operation.Progress
QRCodeGenerate a QR code.QRCode
RadioSelect a single option from a group.Radio
RateA star rating component.Rate
ResultShow the result of an operation.Result
RowA grid row container.Row
SegmentedA segmented control for switching views.Segmented
SkeletonA placeholder while content is loading.Skeleton
SliderA slider for selecting a value in a range.Slider
SpaceSet spacing between components.Space
SpinA loading spinner.Spin
SplitterResizable split panels.Splitter
StatisticDisplay a statistic value.Statistic
StepsA step-by-step progress indicator.Steps
SwitchA toggle switch.Switch
TabsOrganize content into tabbed sections.Tabs
TagA label for categorizing content.Tag
TimePickerSelect a time value.TimePicker
TimelineDisplay a list of events in chronological order.Timeline
TooltipA simple text popup on hover.Tooltip
TourA guided tour of UI elements.Tour
TransferMove items between two lists.Transfer
WatermarkAdd a watermark to a container.Watermark