admin/ui

How to Use

1. Find the abstraction you need below
2. You MUST read the source file to get the exact interface and types!
3. Import: import { Name } from "<importPath>";

Abstractions

Name: Accordion Import: import { Accordion } from "webiny/admin/ui" Source: @webiny/admin-ui/Accordion/index.ts

Name: AdminLayout Import: import { AdminLayout } from "webiny/admin/ui" Source: @webiny/app-admin/components/AdminLayout.tsx

Name: Alert Import: import { Alert } from "webiny/admin/ui" Source: @webiny/admin-ui/Alert/index.ts

Name: AutoComplete Import: import { AutoComplete } from "webiny/admin/ui" Source: @webiny/admin-ui/AutoComplete/index.ts

Name: Avatar Import: import { Avatar } from "webiny/admin/ui" Source: @webiny/admin-ui/Avatar/index.ts

Name: BetaBadge Import: import { BetaBadge } from "webiny/admin/ui" Source: @webiny/admin-ui/BetaBadge/BetaBadge.tsx

Name: Button Import: import { Button } from "webiny/admin/ui" Source: @webiny/admin-ui/Button/index.ts

Name: Card Import: import { Card } from "webiny/admin/ui" Source: @webiny/admin-ui/Card/index.ts

Name: Checkbox Import: import { Checkbox } from "webiny/admin/ui" Source: @webiny/admin-ui/Checkbox/index.ts

Name: CheckboxGroup Import: import { CheckboxGroup } from "webiny/admin/ui" Source: @webiny/admin-ui/CheckboxGroup/index.ts

Name: CloneIcon Import: import { CloneIcon } from "webiny/admin/ui" Source: @webiny/admin-ui/DataList/index.ts

Name: cn Import: import { cn } from "webiny/admin/ui" Source: @webiny/admin-ui/utils.tsx

Name: CodeEditor Import: import { CodeEditor } from "webiny/admin/ui" Source: @webiny/admin-ui/CodeEditor/index.ts

Name: ColorPicker Import: import { ColorPicker } from "webiny/admin/ui" Source: @webiny/admin-ui/ColorPicker/index.ts

Name: CopyButton Import: import { CopyButton } from "webiny/admin/ui" Source: @webiny/admin-ui/Button/index.ts

Name: CreateIcon Import: import { CreateIcon } from "webiny/admin/ui" Source: @webiny/admin-ui/DataList/index.ts

Name: cva Import: import { cva } from "webiny/admin/ui" Source: @webiny/admin-ui/utils.tsx

Name: DataList Import: import { DataList } from "webiny/admin/ui" Source: @webiny/admin-ui/DataList/index.ts

Name: DataListModal Import: import { DataListModal } from "webiny/admin/ui" Source: @webiny/admin-ui/DataList/index.ts

Name: DataListWithSections Import: import { DataListWithSections } from "webiny/admin/ui" Source: @webiny/admin-ui/DataList/index.ts

Name: DataTable Import: import { DataTable } from "webiny/admin/ui" Source: @webiny/admin-ui/DataTable/index.ts

Name: DelayedOnChange Import: import { DelayedOnChange } from "webiny/admin/ui" Source: @webiny/admin-ui/DelayedOnChange/index.ts

Name: DeleteIcon Import: import { DeleteIcon } from "webiny/admin/ui" Source: @webiny/admin-ui/DataList/index.ts

Name: Dialog Import: import { Dialog } from "webiny/admin/ui" Source: @webiny/admin-ui/Dialog/index.ts

Name: Divider Import: import { Divider } from "webiny/admin/ui/lexical" Source: @webiny/lexical-editor/ui/Divider.tsx

Name: DownloadIcon Import: import { DownloadIcon } from "webiny/admin/ui" Source: @webiny/admin-ui/DataList/index.ts

Name: Drawer Import: import { Drawer } from "webiny/admin/ui" Source: @webiny/admin-ui/Drawer/index.ts

Name: DropDown Import: import { DropDown } from "webiny/admin/ui/lexical" Source: @webiny/lexical-editor/ui/DropDown.tsx

Name: DropDownItem Import: import { DropDownItem } from "webiny/admin/ui/lexical" Source: @webiny/lexical-editor/ui/DropDown.tsx

Name: DropdownMenu Import: import { DropdownMenu } from "webiny/admin/ui" Source: @webiny/admin-ui/DropdownMenu/index.ts

Name: DynamicFieldset Import: import { DynamicFieldset } from "webiny/admin/ui" Source: @webiny/admin-ui/DynamicFieldset/index.ts

Name: EditIcon Import: import { EditIcon } from "webiny/admin/ui" Source: @webiny/admin-ui/DataList/index.ts

Name: EmptyState Import: import { EmptyState } from "webiny/admin/ui" Source: @webiny/admin-ui/EmptyState/index.ts

Name: FileManager Import: import { FileManager } from "webiny/admin/ui/file-manager" Source: @webiny/app-admin/base/ui/FileManager.tsx

Name: FileManagerFileItem Kind: type Import: import type { FileManagerFileItem } from "webiny/admin/ui/file-manager" Source: @webiny/app-admin/base/ui/FileManager.tsx Description: Represents a file object managed by the File Manager.

Name: FileManagerViewConfig Import: import { FileManagerViewConfig } from "webiny/admin/ui/file-manager" Source: @webiny/app-file-manager/presentation/config/FileManagerViewConfig.tsx

Name: FilePicker Import: import { FilePicker } from "webiny/admin/ui" Source: @webiny/admin-ui/FilePicker/index.ts

Name: FileUrlFormatter Import: import { FileUrlFormatter } from "webiny/admin/ui/file-manager" Source: @webiny/app-admin/features/fileUrlFormatter/abstractions.ts

Name: FillViewport Import: import { FillViewport } from "webiny/admin/ui" Source: @webiny/admin-ui/FillViewport/index.ts

Name: FillViewportHeight Import: import { FillViewportHeight } from "webiny/admin/ui" Source: @webiny/admin-ui/FillViewport/index.ts

Name: FillViewportWidth Import: import { FillViewportWidth } from "webiny/admin/ui" Source: @webiny/admin-ui/FillViewport/index.ts

Name: FilterIcon Import: import { FilterIcon } from "webiny/admin/ui" Source: @webiny/admin-ui/DataList/index.ts

Name: FolderPicker Import: import { FolderPicker } from "webiny/admin/ui" Source: @webiny/app-aco/components/FolderPicker/FolderPicker.tsx

Name: FolderTree Import: import { FolderTree } from "webiny/admin/ui" Source: @webiny/app-aco/components/FolderTree/index.tsx

Name: FormComponentDescription Import: import { FormComponentDescription } from "webiny/admin/ui" Source: @webiny/admin-ui/FormComponent/index.ts

Name: FormComponentErrorMessage Import: import { FormComponentErrorMessage } from "webiny/admin/ui" Source: @webiny/admin-ui/FormComponent/index.ts

Name: FormComponentLabel Import: import { FormComponentLabel } from "webiny/admin/ui" Source: @webiny/admin-ui/FormComponent/index.ts

Name: FormComponentNote Import: import { FormComponentNote } from "webiny/admin/ui" Source: @webiny/admin-ui/FormComponent/index.ts

Name: generateId Import: import { generateId } from "webiny/admin/ui" Source: @webiny/admin-ui/utils.tsx

Name: getNodeFromSelection Import: import { getNodeFromSelection } from "webiny/admin/ui/lexical" Source: @webiny/lexical-editor/hooks/index.ts

Name: Grid Import: import { Grid } from "webiny/admin/ui" Source: @webiny/admin-ui/Grid/index.ts

Name: HeaderBar Import: import { HeaderBar } from "webiny/admin/ui" Source: @webiny/admin-ui/HeaderBar/index.ts

Name: Heading Import: import { Heading } from "webiny/admin/ui" Source: @webiny/admin-ui/Heading/index.ts

Name: Icon Import: import { Icon } from "webiny/admin/ui" Source: @webiny/admin-ui/Icon/index.ts

Name: IconButton Import: import { IconButton } from "webiny/admin/ui" Source: @webiny/admin-ui/Button/index.ts

Name: IconPicker Import: import { IconPicker } from "webiny/admin/ui" Source: @webiny/admin-ui/IconPicker/index.ts

Name: Image Import: import { Image } from "webiny/admin/ui" Source: @webiny/admin-ui/Image/index.ts

Name: Input Import: import { Input } from "webiny/admin/ui" Source: @webiny/admin-ui/Input/index.ts

Name: Klass Kind: type Import: import type { Klass } from "webiny/admin/ui/lexical" Source: @webiny/lexical-editor/types.ts

Name: Label Import: import { Label } from "webiny/admin/ui" Source: @webiny/admin-ui/Label/index.ts

Name: LexicalEditor Import: import { LexicalEditor } from "webiny/admin/ui/lexical" Source: @webiny/app-admin/components/LexicalEditor/LexicalEditor.tsx

Name: LexicalEditorConfig Import: import { LexicalEditorConfig } from "webiny/admin/ui/lexical" Source: @webiny/lexical-editor/components/LexicalEditorConfig/LexicalEditorConfig.tsx

Name: LexicalHtmlRenderer Import: import { LexicalHtmlRenderer } from "webiny/admin/ui/lexical" Source: @webiny/lexical-editor/components/LexicalHtmlRenderer.tsx

Name: LexicalNode Kind: type Import: import type { LexicalNode } from "webiny/admin/ui/lexical" Source: @webiny/lexical-editor/types.ts

Name: Link Import: import { Link } from "webiny/admin/ui" Source: @webiny/admin-ui/Link/index.ts

Name: List Import: import { List } from "webiny/admin/ui" Source: @webiny/admin-ui/List/index.ts

Name: ListIcon Import: import { ListIcon } from "webiny/admin/ui" Source: @webiny/admin-ui/DataList/index.ts

Name: Loader Import: import { Loader } from "webiny/admin/ui" Source: @webiny/admin-ui/Loader/index.ts

Name: LoginIcon Import: import { LoginIcon } from "webiny/admin/ui" Source: @webiny/admin-ui/DataList/index.ts

Name: Logo Import: import { Logo } from "webiny/admin/ui" Source: @webiny/app-admin/base/ui/Logo.tsx

Name: MultiAutoComplete Import: import { MultiAutoComplete } from "webiny/admin/ui" Source: @webiny/admin-ui/MultiAutoComplete/index.ts

Name: MultiFilePicker Import: import { MultiFilePicker } from "webiny/admin/ui" Source: @webiny/admin-ui/MultiFilePicker/index.ts

Name: NextPageIcon Import: import { NextPageIcon } from "webiny/admin/ui" Source: @webiny/admin-ui/DataList/index.ts

Name: OptionsIcon Import: import { OptionsIcon } from "webiny/admin/ui" Source: @webiny/admin-ui/DataList/index.ts

Name: OptionsMenu Import: import { OptionsMenu } from "webiny/admin/ui" Source: @webiny/app-admin/components/OptionsMenu/index.ts

Name: OptionsMenuItem Import: import { OptionsMenuItem } from "webiny/admin/ui" Source: @webiny/app-admin/components/OptionsMenu/index.ts

Name: OptionsMenuLink Import: import { OptionsMenuLink } from "webiny/admin/ui" Source: @webiny/app-admin/components/OptionsMenu/index.ts

Name: OverlayLoader Import: import { OverlayLoader } from "webiny/admin/ui" Source: @webiny/admin-ui/Loader/index.ts

Name: Popover Import: import { Popover } from "webiny/admin/ui" Source: @webiny/admin-ui/Popover/index.ts

Name: Portal Import: import { Portal } from "webiny/admin/ui" Source: @webiny/admin-ui/Portal/index.ts

Name: PreviousPageIcon Import: import { PreviousPageIcon } from "webiny/admin/ui" Source: @webiny/admin-ui/DataList/index.ts

Name: ProgressBar Import: import { ProgressBar } from "webiny/admin/ui" Source: @webiny/admin-ui/ProgressBar/index.ts

Name: Radio Import: import { Radio } from "webiny/admin/ui" Source: @webiny/admin-ui/RadioGroup/index.ts

Name: RadioGroup Import: import { RadioGroup } from "webiny/admin/ui" Source: @webiny/admin-ui/RadioGroup/index.ts

Name: RangeSlider Import: import { RangeSlider } from "webiny/admin/ui" Source: @webiny/admin-ui/RangeSlider/index.ts

Name: RefreshIcon Import: import { RefreshIcon } from "webiny/admin/ui" Source: @webiny/admin-ui/DataList/index.ts

Name: ScrollArea Import: import { ScrollArea } from "webiny/admin/ui" Source: @webiny/admin-ui/ScrollArea/index.ts

Name: Scrollbar Import: import { Scrollbar } from "webiny/admin/ui" Source: @webiny/admin-ui/Scrollbar/index.ts

Name: ScrollBar Import: import { ScrollBar } from "webiny/admin/ui" Source: @webiny/admin-ui/ScrollArea/index.ts

Name: SegmentedControl Import: import { SegmentedControl } from "webiny/admin/ui" Source: @webiny/admin-ui/SegmentedControl/index.ts

Name: Select Import: import { Select } from "webiny/admin/ui" Source: @webiny/admin-ui/Select/index.ts

Name: Separator Import: import { Separator } from "webiny/admin/ui" Source: @webiny/admin-ui/Separator/index.ts

Name: Sidebar Import: import { Sidebar } from "webiny/admin/ui" Source: @webiny/admin-ui/Sidebar/index.ts

Name: SidebarProvider Import: import { SidebarProvider } from "webiny/admin/ui" Source: @webiny/admin-ui/Sidebar/index.ts

Name: Skeleton Import: import { Skeleton } from "webiny/admin/ui" Source: @webiny/admin-ui/Skeleton/index.ts

Name: Slider Import: import { Slider } from "webiny/admin/ui" Source: @webiny/admin-ui/Slider/index.ts

Name: SortIcon Import: import { SortIcon } from "webiny/admin/ui" Source: @webiny/admin-ui/DataList/index.ts

Name: SteppedProgress Import: import { SteppedProgress } from "webiny/admin/ui" Source: @webiny/admin-ui/SteppedProgress/index.ts

Name: Switch Import: import { Switch } from "webiny/admin/ui" Source: @webiny/admin-ui/Switch/index.ts

Name: Table Import: import { Table } from "webiny/admin/ui" Source: @webiny/admin-ui/Table/index.ts

Name: Tabs Import: import { Tabs } from "webiny/admin/ui" Source: @webiny/admin-ui/Tabs/index.ts

Name: Tag Import: import { Tag } from "webiny/admin/ui" Source: @webiny/admin-ui/Tag/index.ts

Name: Tags Import: import { Tags } from "webiny/admin/ui" Source: @webiny/admin-ui/Tags/index.ts

Name: TenantSelector Import: import { TenantSelector } from "webiny/admin/ui" Source: @webiny/app-admin/base/ui/TenantSelector.tsx

Name: Text Import: import { Text } from "webiny/admin/ui" Source: @webiny/admin-ui/Text/index.ts

Name: Textarea Import: import { Textarea } from "webiny/admin/ui" Source: @webiny/admin-ui/Textarea/index.ts

Name: TimeAgo Import: import { TimeAgo } from "webiny/admin/ui" Source: @webiny/admin-ui/TimeAgo/index.ts

Name: Toast Import: import { Toast } from "webiny/admin/ui" Source: @webiny/admin-ui/Toast/index.ts

Name: Tooltip Import: import { Tooltip } from "webiny/admin/ui" Source: @webiny/admin-ui/Tooltip/index.ts

Name: Tree Import: import { Tree } from "webiny/admin/ui" Source: @webiny/admin-ui/Tree/index.ts

Name: UploadIcon Import: import { UploadIcon } from "webiny/admin/ui" Source: @webiny/admin-ui/DataList/index.ts

Name: useCurrentElement Import: import { useCurrentElement } from "webiny/admin/ui/lexical" Source: @webiny/lexical-editor/hooks/index.ts

Name: useCurrentSelection Import: import { useCurrentSelection } from "webiny/admin/ui/lexical" Source: @webiny/lexical-editor/hooks/index.ts

Name: useDeriveValueFromSelection Import: import { useDeriveValueFromSelection } from "webiny/admin/ui/lexical" Source: @webiny/lexical-editor/hooks/index.ts

Name: useDialog Import: import { useDialog } from "webiny/admin/ui" Source: @webiny/app-admin/hooks/index.ts

Name: useDialogs Import: import { useDialogs } from "webiny/admin/ui" Source: @webiny/app-admin/components/Dialogs/useDialogs.ts

Name: useDisclosure Import: import { useDisclosure } from "webiny/admin/ui" Source: @webiny/admin-ui/hooks/index.ts

Name: useFileManagerConfig Import: import { useFileManagerConfig } from "webiny/admin/ui/file-manager" Source: @webiny/app-file-manager/presentation/config/FileManagerViewConfig.tsx

Name: useFontColorPicker Import: import { useFontColorPicker } from "webiny/admin/ui/lexical" Source: @webiny/lexical-editor/hooks/index.ts

Name: useHotkeys Import: import { useHotkeys } from "webiny/admin/ui" Source: @webiny/app-admin/hooks/useHotkeys.ts

Name: useIsMounted Import: import { useIsMounted } from "webiny/admin/ui/lexical" Source: @webiny/lexical-editor/hooks/index.ts

Name: useLexicalEditorConfig Import: import { useLexicalEditorConfig } from "webiny/admin/ui/lexical" Source: @webiny/lexical-editor/components/LexicalEditorConfig/LexicalEditorConfig.tsx

Name: useNamedConfirmationDialog Import: import { useNamedConfirmationDialog } from "webiny/admin/ui" Source: @webiny/app-admin/hooks/index.ts

Name: useOpenDialog Import: import { useOpenDialog } from "webiny/admin/ui" Source: @webiny/app-admin/hooks/index.ts

Name: useRichTextEditor Import: import { useRichTextEditor } from "webiny/admin/ui/lexical" Source: @webiny/lexical-editor/hooks/index.ts

Name: useSidebar Import: import { useSidebar } from "webiny/admin/ui" Source: @webiny/admin-ui/Sidebar/index.ts

Name: useTextAlignmentAction Import: import { useTextAlignmentAction } from "webiny/admin/ui/lexical" Source: @webiny/lexical-editor/hooks/index.ts

Name: useToast Import: import { useToast } from "webiny/admin/ui" Source: @webiny/admin-ui/Toast/index.ts

Name: useTypographyAction Import: import { useTypographyAction } from "webiny/admin/ui/lexical" Source: @webiny/lexical-editor/hooks/index.ts

Name: Widget Import: import { Widget } from "webiny/admin/ui" Source: @webiny/admin-ui/Widget/index.ts