webiny-admin-ui-catalog

---
name: webiny-admin-ui-catalog
context: webiny-api
description: >
  admin/ui — 90 abstractions.
---

# admin/ui

## How to Use

1. Find the abstraction you need below
2. 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:** `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:** `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:** `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`

---