Skills Development Comprehensive Web UI Component Kit

Comprehensive Web UI Component Kit

v20260424
webiny-admin-ui-catalog
This is a comprehensive catalog of reusable UI abstractions and components designed for building sophisticated administrative dashboards and complex web interfaces. It includes fundamental elements like Buttons, Inputs, and Avatars, as well as advanced components such as DataTables, Accordions, FilePickers, and CodeEditors, ensuring a robust and consistent user experience across large-scale web applications.
Get Skill
147 downloads
Overview

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: 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: 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: 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: 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: FilePicker Import: import { FilePicker } from "webiny/admin/ui" Source: @webiny/admin-ui/FilePicker/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: generateId Import: import { generateId } from "webiny/admin/ui" Source: @webiny/admin-ui/utils.tsx


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: Label Import: import { Label } from "webiny/admin/ui" Source: @webiny/admin-ui/Label/index.ts


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


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: 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: 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: useHotkeys Import: import { useHotkeys } from "webiny/admin/ui" Source: @webiny/app-admin/hooks/useHotkeys.ts


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


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


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


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


Info
Category Development
Name webiny-admin-ui-catalog
Version v20260424
Size 12.73KB
Updated At 2026-04-28
Language