admin/ui
SkillDev toolsGives your coding agent a searchable list of ready-made React UI components from Webiny's admin library.
Available today. Use it from your connected AI after setup.
No other account needed.
Add ahel to your AI once: Claude, ChatGPT, Cursor, Claude Code or Codex. Then ask it to use this.
Then ask your AI: use the admin/ui skill
About this skill
admin/ui, 130 abstractions.
What this skill tells your AI
The instructions your AI receives, as published by webiny/webiny-js in skills/user-skills/generated/admin/ui/SKILL.md and read by ahel’s review.
How to Use
- Find the abstraction you need below
- You MUST read the source file to get the exact interface and types!
- 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
Signals
- GitHub stars
- 8k
- Forks
- 679
- Last commit
- Sep 2026
Advanced
- Item type
- skill
- Key
webiny-admin-ui-catalog- Source
- github.com/webiny/webiny-js