# Arena by Dravensoft > Use this skill to build user interfaces with Arena, a token-driven design system with React and Angular component libraries on a shared Tailwind layer, for production screens or for throwaway prototypes and mocks. Covers design tokens, colour, type, spacing, motion, iconography, and the accessibility pattern each component binds. Arena carries the design language and not the skin: it ships Dravensoft's palette and fonts, and any project declares its own in arena.config.json and answers the kernel's style roles with a style plugin of its own. Arena carries the design language and not the skin: a consuming project declares its own palettes and fonts in `arena.config.json`, and the `arena-to-prod` command each package ships turns that into the one stylesheet a package cannot carry. **Read your own framework's documents and not the other's.** Every component ships under both names and the two documents are not interchangeable, so the per-layer corpora below are separate on purpose and there is no combined one. ## Start here - [The router](https://arena.dravensoft.org/skills/design/SKILL.md): the rules of the language. Every other document is reached from here. - [When the markup is yours](https://arena.dravensoft.org/skills/design/references/media-register.md): Arena's component list is the furniture of an application somebody works in. Read this once, when you have found the first screen with no component under it. - [Before the first screen](https://arena.dravensoft.org/skills/design/references/cold-start.md): This page is where a project settles what it looks like, and its first node splits the two ways of arriving: a project with no `arena.config.json`, no style plugin and no screens, where the appearance is invented by whoever writes the first file, and one already carrying all three, where it is context to acquire rather than to invent. Read this before any other page this branch routes you to**, because every one of them assumes the decisions below have been made. - [What you may choose](https://arena.dravensoft.org/skills/design/references/stack.md): **Arena is built with bun, React 18, Angular 22 and TypeScript. Read this once per project, beside [`cold-start. - [Making Arena look like your product](https://arena.dravensoft.org/skills/design/references/style-kernel.md): Arena keeps the questions and a repertoire of values. Read this once per project, before the first screen. - [When it has to be found](https://arena.dravensoft.org/skills/design/references/seo.md): Arena writes the document `` in Angular, and whether your product needs that is a decision about the product rather than about a screen. Read this once per project, before the first screen. - [What Arena hands over](https://arena.dravensoft.org/skills/design/references/surface.md): Arena is larger than the component list it is known for, and the parts that are not components are the ones a project discovers late or never. Read this first, before the three project questions the router asks next, because those three ask how much of a thing you have not been shown yet. - [The page you paint](https://arena.dravensoft.org/skills/design/references/page.md): Arena paints no page of yours. Read this before the first screen and again while you write one, because it is the half of a page that is never a component: what colour your own markup takes, how wide the content column gets, and how much space goes between one component and the next. - [Every component in one read](https://arena.dravensoft.org/frameworks/INDEX.md): which components exist and which layers ship them. ## React - [Layer index](https://arena.dravensoft.org/frameworks/react/INDEX.md): every component under this framework's own names. - [Install and configure](https://arena.dravensoft.org/frameworks/react/PACKAGE.md): the package, `arena.config.json`, and what the CLI writes. - [Everything above and every component document, in one file](https://arena.dravensoft.org/llms-react.txt): the whole React corpus, and nothing from the other layer. - [brand](https://arena.dravensoft.org/frameworks/react/components/brand/INDEX.md): the brand components under React. - [charts](https://arena.dravensoft.org/frameworks/react/components/charts/INDEX.md): the charts components under React. - [display](https://arena.dravensoft.org/frameworks/react/components/display/INDEX.md): the display components under React. - [feedback](https://arena.dravensoft.org/frameworks/react/components/feedback/INDEX.md): the feedback components under React. - [forms](https://arena.dravensoft.org/frameworks/react/components/forms/INDEX.md): the forms components under React. - [layout](https://arena.dravensoft.org/frameworks/react/components/layout/INDEX.md): the layout components under React. - [navigation](https://arena.dravensoft.org/frameworks/react/components/navigation/INDEX.md): the navigation components under React. ## Angular - [Layer index](https://arena.dravensoft.org/frameworks/angular/INDEX.md): every component under this framework's own names. - [Install and configure](https://arena.dravensoft.org/frameworks/angular/PACKAGE.md): the package, `arena.config.json`, and what the CLI writes. - [Everything above and every component document, in one file](https://arena.dravensoft.org/llms-angular.txt): the whole Angular corpus, and nothing from the other layer. - [brand](https://arena.dravensoft.org/frameworks/angular/components/brand/INDEX.md): the brand components under Angular. - [charts](https://arena.dravensoft.org/frameworks/angular/components/charts/INDEX.md): the charts components under Angular. - [display](https://arena.dravensoft.org/frameworks/angular/components/display/INDEX.md): the display components under Angular. - [feedback](https://arena.dravensoft.org/frameworks/angular/components/feedback/INDEX.md): the feedback components under Angular. - [forms](https://arena.dravensoft.org/frameworks/angular/components/forms/INDEX.md): the forms components under Angular. - [layout](https://arena.dravensoft.org/frameworks/angular/components/layout/INDEX.md): the layout components under Angular. - [navigation](https://arena.dravensoft.org/frameworks/angular/components/navigation/INDEX.md): the navigation components under Angular. ## Optional One document per component, which is what a builder reaches for after the index above has told them which component they want. Fetch the one you need rather than all of them. - [ArenaAppLogo, react](https://arena.dravensoft.org/frameworks/react/components/brand/arena-app-logo/ArenaAppLogo.prompt.md): how to use it, with its Do and its Don't. - [ArenaBarChart, react](https://arena.dravensoft.org/frameworks/react/components/charts/arena-bar-chart/ArenaBarChart.prompt.md): how to use it, with its Do and its Don't. - [ArenaChartCard, react](https://arena.dravensoft.org/frameworks/react/components/charts/arena-chart-card/ArenaChartCard.prompt.md): how to use it, with its Do and its Don't. - [ArenaDoughnutChart, react](https://arena.dravensoft.org/frameworks/react/components/charts/arena-doughnut-chart/ArenaDoughnutChart.prompt.md): how to use it, with its Do and its Don't. - [ArenaHorizontalBarChart, react](https://arena.dravensoft.org/frameworks/react/components/charts/arena-horizontal-bar-chart/ArenaHorizontalBarChart.prompt.md): how to use it, with its Do and its Don't. - [ArenaLineChart, react](https://arena.dravensoft.org/frameworks/react/components/charts/arena-line-chart/ArenaLineChart.prompt.md): how to use it, with its Do and its Don't. - [ArenaPyramidChart, react](https://arena.dravensoft.org/frameworks/react/components/charts/arena-pyramid-chart/ArenaPyramidChart.prompt.md): how to use it, with its Do and its Don't. - [ArenaRadarChart, react](https://arena.dravensoft.org/frameworks/react/components/charts/arena-radar-chart/ArenaRadarChart.prompt.md): how to use it, with its Do and its Don't. - [ArenaScatterChart, react](https://arena.dravensoft.org/frameworks/react/components/charts/arena-scatter-chart/ArenaScatterChart.prompt.md): how to use it, with its Do and its Don't. - [ArenaActivityFeed, react](https://arena.dravensoft.org/frameworks/react/components/display/arena-activity-feed/ArenaActivityFeed.prompt.md): how to use it, with its Do and its Don't. - [ArenaAvatar, react](https://arena.dravensoft.org/frameworks/react/components/display/arena-avatar/ArenaAvatar.prompt.md): how to use it, with its Do and its Don't. - [ArenaBadge, react](https://arena.dravensoft.org/frameworks/react/components/display/arena-badge/ArenaBadge.prompt.md): how to use it, with its Do and its Don't. - [ArenaCalendarEvent, react](https://arena.dravensoft.org/frameworks/react/components/display/arena-calendar-event/ArenaCalendarEvent.prompt.md): how to use it, with its Do and its Don't. - [ArenaCalendar, react](https://arena.dravensoft.org/frameworks/react/components/display/arena-calendar/ArenaCalendar.prompt.md): how to use it, with its Do and its Don't. - [ArenaCard, react](https://arena.dravensoft.org/frameworks/react/components/display/arena-card/ArenaCard.prompt.md): how to use it, with its Do and its Don't. - [ArenaKeyValue, react](https://arena.dravensoft.org/frameworks/react/components/display/arena-key-value/ArenaKeyValue.prompt.md): how to use it, with its Do and its Don't. - [ArenaPeopleList, react](https://arena.dravensoft.org/frameworks/react/components/display/arena-people-list/ArenaPeopleList.prompt.md): how to use it, with its Do and its Don't. - [ArenaPersonRow, react](https://arena.dravensoft.org/frameworks/react/components/display/arena-person-row/ArenaPersonRow.prompt.md): how to use it, with its Do and its Don't. - [ArenaSkeleton, react](https://arena.dravensoft.org/frameworks/react/components/display/arena-skeleton/ArenaSkeleton.prompt.md): how to use it, with its Do and its Don't. - [ArenaStatCard, react](https://arena.dravensoft.org/frameworks/react/components/display/arena-stat-card/ArenaStatCard.prompt.md): how to use it, with its Do and its Don't. - [ArenaTableCell, react](https://arena.dravensoft.org/frameworks/react/components/display/arena-table-cell/ArenaTableCell.prompt.md): how to use it, with its Do and its Don't. - [ArenaTableRow, react](https://arena.dravensoft.org/frameworks/react/components/display/arena-table-row/ArenaTableRow.prompt.md): how to use it, with its Do and its Don't. - [ArenaTable, react](https://arena.dravensoft.org/frameworks/react/components/display/arena-table/ArenaTable.prompt.md): how to use it, with its Do and its Don't. - [ArenaTag, react](https://arena.dravensoft.org/frameworks/react/components/display/arena-tag/ArenaTag.prompt.md): how to use it, with its Do and its Don't. - [ArenaUnauthCard, react](https://arena.dravensoft.org/frameworks/react/components/display/arena-unauth-card/ArenaUnauthCard.prompt.md): how to use it, with its Do and its Don't. - [ArenaAlert, react](https://arena.dravensoft.org/frameworks/react/components/feedback/arena-alert/ArenaAlert.prompt.md): how to use it, with its Do and its Don't. - [ArenaConfirmDialog, react](https://arena.dravensoft.org/frameworks/react/components/feedback/arena-confirm-dialog/ArenaConfirmDialog.prompt.md): how to use it, with its Do and its Don't. - [ArenaDialog, react](https://arena.dravensoft.org/frameworks/react/components/feedback/arena-dialog/ArenaDialog.prompt.md): how to use it, with its Do and its Don't. - [ArenaEmptyState, react](https://arena.dravensoft.org/frameworks/react/components/feedback/arena-empty-state/ArenaEmptyState.prompt.md): how to use it, with its Do and its Don't. - [ArenaErrorState, react](https://arena.dravensoft.org/frameworks/react/components/feedback/arena-error-state/ArenaErrorState.prompt.md): how to use it, with its Do and its Don't. - [ArenaOnboarding, react](https://arena.dravensoft.org/frameworks/react/components/feedback/arena-onboarding/ArenaOnboarding.prompt.md): how to use it, with its Do and its Don't. - [ArenaProgressBar, react](https://arena.dravensoft.org/frameworks/react/components/feedback/arena-progress-bar/ArenaProgressBar.prompt.md): how to use it, with its Do and its Don't. - [ArenaSheet, react](https://arena.dravensoft.org/frameworks/react/components/feedback/arena-sheet/ArenaSheet.prompt.md): how to use it, with its Do and its Don't. - [ArenaSpinner, react](https://arena.dravensoft.org/frameworks/react/components/feedback/arena-spinner/ArenaSpinner.prompt.md): how to use it, with its Do and its Don't. - [ArenaToastHost, react](https://arena.dravensoft.org/frameworks/react/components/feedback/arena-toast-host/ArenaToastHost.prompt.md): how to use it, with its Do and its Don't. - [ArenaToast, react](https://arena.dravensoft.org/frameworks/react/components/feedback/arena-toast/ArenaToast.prompt.md): how to use it, with its Do and its Don't. - [ArenaTooltip, react](https://arena.dravensoft.org/frameworks/react/components/feedback/arena-tooltip/ArenaTooltip.prompt.md): how to use it, with its Do and its Don't. - [ArenaButton, react](https://arena.dravensoft.org/frameworks/react/components/forms/arena-button/ArenaButton.prompt.md): how to use it, with its Do and its Don't. - [ArenaCheckbox, react](https://arena.dravensoft.org/frameworks/react/components/forms/arena-checkbox/ArenaCheckbox.prompt.md): how to use it, with its Do and its Don't. - [ArenaIconButton, react](https://arena.dravensoft.org/frameworks/react/components/forms/arena-icon-button/ArenaIconButton.prompt.md): how to use it, with its Do and its Don't. - [ArenaInput, react](https://arena.dravensoft.org/frameworks/react/components/forms/arena-input/ArenaInput.prompt.md): how to use it, with its Do and its Don't. - [ArenaRadioGroup, react](https://arena.dravensoft.org/frameworks/react/components/forms/arena-radio-group/ArenaRadioGroup.prompt.md): how to use it, with its Do and its Don't. - [ArenaRadio, react](https://arena.dravensoft.org/frameworks/react/components/forms/arena-radio/ArenaRadio.prompt.md): how to use it, with its Do and its Don't. - [ArenaSelect, react](https://arena.dravensoft.org/frameworks/react/components/forms/arena-select/ArenaSelect.prompt.md): how to use it, with its Do and its Don't. - [ArenaSwitch, react](https://arena.dravensoft.org/frameworks/react/components/forms/arena-switch/ArenaSwitch.prompt.md): how to use it, with its Do and its Don't. - [ArenaTextarea, react](https://arena.dravensoft.org/frameworks/react/components/forms/arena-textarea/ArenaTextarea.prompt.md): how to use it, with its Do and its Don't. - [ArenaBoardColumn, react](https://arena.dravensoft.org/frameworks/react/components/layout/arena-board-column/ArenaBoardColumn.prompt.md): how to use it, with its Do and its Don't. - [ArenaBoard, react](https://arena.dravensoft.org/frameworks/react/components/layout/arena-board/ArenaBoard.prompt.md): how to use it, with its Do and its Don't. - [ArenaFigure, react](https://arena.dravensoft.org/frameworks/react/components/layout/arena-figure/ArenaFigure.prompt.md): how to use it, with its Do and its Don't. - [ArenaGrid, react](https://arena.dravensoft.org/frameworks/react/components/layout/arena-grid/ArenaGrid.prompt.md): how to use it, with its Do and its Don't. - [ArenaHero, react](https://arena.dravensoft.org/frameworks/react/components/layout/arena-hero/ArenaHero.prompt.md): how to use it, with its Do and its Don't. - [ArenaMain, react](https://arena.dravensoft.org/frameworks/react/components/layout/arena-main/ArenaMain.prompt.md): how to use it, with its Do and its Don't. - [ArenaScrollerItem, react](https://arena.dravensoft.org/frameworks/react/components/layout/arena-scroller-item/ArenaScrollerItem.prompt.md): how to use it, with its Do and its Don't. - [ArenaScroller, react](https://arena.dravensoft.org/frameworks/react/components/layout/arena-scroller/ArenaScroller.prompt.md): how to use it, with its Do and its Don't. - [ArenaSection, react](https://arena.dravensoft.org/frameworks/react/components/layout/arena-section/ArenaSection.prompt.md): how to use it, with its Do and its Don't. - [ArenaSiteFooter, react](https://arena.dravensoft.org/frameworks/react/components/layout/arena-site-footer/ArenaSiteFooter.prompt.md): how to use it, with its Do and its Don't. - [ArenaSkipLink, react](https://arena.dravensoft.org/frameworks/react/components/layout/arena-skip-link/ArenaSkipLink.prompt.md): how to use it, with its Do and its Don't. - [ArenaAppBar, react](https://arena.dravensoft.org/frameworks/react/components/navigation/arena-app-bar/ArenaAppBar.prompt.md): how to use it, with its Do and its Don't. - [ArenaBottomNavItem, react](https://arena.dravensoft.org/frameworks/react/components/navigation/arena-bottom-nav-item/ArenaBottomNavItem.prompt.md): how to use it, with its Do and its Don't. - [ArenaBottomNav, react](https://arena.dravensoft.org/frameworks/react/components/navigation/arena-bottom-nav/ArenaBottomNav.prompt.md): how to use it, with its Do and its Don't. - [ArenaBreadcrumbs, react](https://arena.dravensoft.org/frameworks/react/components/navigation/arena-breadcrumbs/ArenaBreadcrumbs.prompt.md): how to use it, with its Do and its Don't. - [ArenaBulkActionBar, react](https://arena.dravensoft.org/frameworks/react/components/navigation/arena-bulk-action-bar/ArenaBulkActionBar.prompt.md): how to use it, with its Do and its Don't. - [ArenaCommandPalette, react](https://arena.dravensoft.org/frameworks/react/components/navigation/arena-command-palette/ArenaCommandPalette.prompt.md): how to use it, with its Do and its Don't. - [ArenaMenu, react](https://arena.dravensoft.org/frameworks/react/components/navigation/arena-menu/ArenaMenu.prompt.md): how to use it, with its Do and its Don't. - [ArenaPageHead, react](https://arena.dravensoft.org/frameworks/react/components/navigation/arena-page-head/ArenaPageHead.prompt.md): how to use it, with its Do and its Don't. - [ArenaPagination, react](https://arena.dravensoft.org/frameworks/react/components/navigation/arena-pagination/ArenaPagination.prompt.md): how to use it, with its Do and its Don't. - [ArenaSegmentedControl, react](https://arena.dravensoft.org/frameworks/react/components/navigation/arena-segmented-control/ArenaSegmentedControl.prompt.md): how to use it, with its Do and its Don't. - [ArenaSideNavCollapsible, react](https://arena.dravensoft.org/frameworks/react/components/navigation/arena-side-nav-collapsible/ArenaSideNavCollapsible.prompt.md): how to use it, with its Do and its Don't. - [ArenaSideNavItem, react](https://arena.dravensoft.org/frameworks/react/components/navigation/arena-side-nav-item/ArenaSideNavItem.prompt.md): how to use it, with its Do and its Don't. - [ArenaSideNavSection, react](https://arena.dravensoft.org/frameworks/react/components/navigation/arena-side-nav-section/ArenaSideNavSection.prompt.md): how to use it, with its Do and its Don't. - [ArenaSideNav, react](https://arena.dravensoft.org/frameworks/react/components/navigation/arena-side-nav/ArenaSideNav.prompt.md): how to use it, with its Do and its Don't. - [ArenaTab, react](https://arena.dravensoft.org/frameworks/react/components/navigation/arena-tab/ArenaTab.prompt.md): how to use it, with its Do and its Don't. - [ArenaTabs, react](https://arena.dravensoft.org/frameworks/react/components/navigation/arena-tabs/ArenaTabs.prompt.md): how to use it, with its Do and its Don't. - [ArenaAppLogo, angular](https://arena.dravensoft.org/frameworks/angular/components/brand/arena-app-logo/ArenaAppLogo.prompt.md): how to use it, with its Do and its Don't. - [ArenaBarChart, angular](https://arena.dravensoft.org/frameworks/angular/components/charts/arena-bar-chart/ArenaBarChart.prompt.md): how to use it, with its Do and its Don't. - [ArenaChartCard, angular](https://arena.dravensoft.org/frameworks/angular/components/charts/arena-chart-card/ArenaChartCard.prompt.md): how to use it, with its Do and its Don't. - [ArenaDoughnutChart, angular](https://arena.dravensoft.org/frameworks/angular/components/charts/arena-doughnut-chart/ArenaDoughnutChart.prompt.md): how to use it, with its Do and its Don't. - [ArenaHorizontalBarChart, angular](https://arena.dravensoft.org/frameworks/angular/components/charts/arena-horizontal-bar-chart/ArenaHorizontalBarChart.prompt.md): how to use it, with its Do and its Don't. - [ArenaLineChart, angular](https://arena.dravensoft.org/frameworks/angular/components/charts/arena-line-chart/ArenaLineChart.prompt.md): how to use it, with its Do and its Don't. - [ArenaPyramidChart, angular](https://arena.dravensoft.org/frameworks/angular/components/charts/arena-pyramid-chart/ArenaPyramidChart.prompt.md): how to use it, with its Do and its Don't. - [ArenaRadarChart, angular](https://arena.dravensoft.org/frameworks/angular/components/charts/arena-radar-chart/ArenaRadarChart.prompt.md): how to use it, with its Do and its Don't. - [ArenaScatterChart, angular](https://arena.dravensoft.org/frameworks/angular/components/charts/arena-scatter-chart/ArenaScatterChart.prompt.md): how to use it, with its Do and its Don't. - [ArenaActivityFeed, angular](https://arena.dravensoft.org/frameworks/angular/components/display/arena-activity-feed/ArenaActivityFeed.prompt.md): how to use it, with its Do and its Don't. - [ArenaAvatar, angular](https://arena.dravensoft.org/frameworks/angular/components/display/arena-avatar/ArenaAvatar.prompt.md): how to use it, with its Do and its Don't. - [ArenaBadge, angular](https://arena.dravensoft.org/frameworks/angular/components/display/arena-badge/ArenaBadge.prompt.md): how to use it, with its Do and its Don't. - [ArenaCalendarEvent, angular](https://arena.dravensoft.org/frameworks/angular/components/display/arena-calendar-event/ArenaCalendarEvent.prompt.md): how to use it, with its Do and its Don't. - [ArenaCalendar, angular](https://arena.dravensoft.org/frameworks/angular/components/display/arena-calendar/ArenaCalendar.prompt.md): how to use it, with its Do and its Don't. - [ArenaCard, angular](https://arena.dravensoft.org/frameworks/angular/components/display/arena-card/ArenaCard.prompt.md): how to use it, with its Do and its Don't. - [ArenaKeyValue, angular](https://arena.dravensoft.org/frameworks/angular/components/display/arena-key-value/ArenaKeyValue.prompt.md): how to use it, with its Do and its Don't. - [ArenaPeopleList, angular](https://arena.dravensoft.org/frameworks/angular/components/display/arena-people-list/ArenaPeopleList.prompt.md): how to use it, with its Do and its Don't. - [ArenaPersonRow, angular](https://arena.dravensoft.org/frameworks/angular/components/display/arena-person-row/ArenaPersonRow.prompt.md): how to use it, with its Do and its Don't. - [ArenaSkeleton, angular](https://arena.dravensoft.org/frameworks/angular/components/display/arena-skeleton/ArenaSkeleton.prompt.md): how to use it, with its Do and its Don't. - [ArenaStatCard, angular](https://arena.dravensoft.org/frameworks/angular/components/display/arena-stat-card/ArenaStatCard.prompt.md): how to use it, with its Do and its Don't. - [ArenaTableCell, angular](https://arena.dravensoft.org/frameworks/angular/components/display/arena-table-cell/ArenaTableCell.prompt.md): how to use it, with its Do and its Don't. - [ArenaTableRow, angular](https://arena.dravensoft.org/frameworks/angular/components/display/arena-table-row/ArenaTableRow.prompt.md): how to use it, with its Do and its Don't. - [ArenaTable, angular](https://arena.dravensoft.org/frameworks/angular/components/display/arena-table/ArenaTable.prompt.md): how to use it, with its Do and its Don't. - [ArenaTag, angular](https://arena.dravensoft.org/frameworks/angular/components/display/arena-tag/ArenaTag.prompt.md): how to use it, with its Do and its Don't. - [ArenaUnauthCard, angular](https://arena.dravensoft.org/frameworks/angular/components/display/arena-unauth-card/ArenaUnauthCard.prompt.md): how to use it, with its Do and its Don't. - [ArenaAlert, angular](https://arena.dravensoft.org/frameworks/angular/components/feedback/arena-alert/ArenaAlert.prompt.md): how to use it, with its Do and its Don't. - [ArenaConfirmDialog, angular](https://arena.dravensoft.org/frameworks/angular/components/feedback/arena-confirm-dialog/ArenaConfirmDialog.prompt.md): how to use it, with its Do and its Don't. - [ArenaDialog, angular](https://arena.dravensoft.org/frameworks/angular/components/feedback/arena-dialog/ArenaDialog.prompt.md): how to use it, with its Do and its Don't. - [ArenaEmptyState, angular](https://arena.dravensoft.org/frameworks/angular/components/feedback/arena-empty-state/ArenaEmptyState.prompt.md): how to use it, with its Do and its Don't. - [ArenaErrorState, angular](https://arena.dravensoft.org/frameworks/angular/components/feedback/arena-error-state/ArenaErrorState.prompt.md): how to use it, with its Do and its Don't. - [ArenaOnboarding, angular](https://arena.dravensoft.org/frameworks/angular/components/feedback/arena-onboarding/ArenaOnboarding.prompt.md): how to use it, with its Do and its Don't. - [ArenaProgressBar, angular](https://arena.dravensoft.org/frameworks/angular/components/feedback/arena-progress-bar/ArenaProgressBar.prompt.md): how to use it, with its Do and its Don't. - [ArenaSheet, angular](https://arena.dravensoft.org/frameworks/angular/components/feedback/arena-sheet/ArenaSheet.prompt.md): how to use it, with its Do and its Don't. - [ArenaSpinner, angular](https://arena.dravensoft.org/frameworks/angular/components/feedback/arena-spinner/ArenaSpinner.prompt.md): how to use it, with its Do and its Don't. - [ArenaToastHost, angular](https://arena.dravensoft.org/frameworks/angular/components/feedback/arena-toast-host/ArenaToastHost.prompt.md): how to use it, with its Do and its Don't. - [ArenaToast, angular](https://arena.dravensoft.org/frameworks/angular/components/feedback/arena-toast/ArenaToast.prompt.md): how to use it, with its Do and its Don't. - [ArenaTooltip, angular](https://arena.dravensoft.org/frameworks/angular/components/feedback/arena-tooltip/ArenaTooltip.prompt.md): how to use it, with its Do and its Don't. - [ArenaButton, angular](https://arena.dravensoft.org/frameworks/angular/components/forms/arena-button/ArenaButton.prompt.md): how to use it, with its Do and its Don't. - [ArenaCheckbox, angular](https://arena.dravensoft.org/frameworks/angular/components/forms/arena-checkbox/ArenaCheckbox.prompt.md): how to use it, with its Do and its Don't. - [ArenaIconButton, angular](https://arena.dravensoft.org/frameworks/angular/components/forms/arena-icon-button/ArenaIconButton.prompt.md): how to use it, with its Do and its Don't. - [ArenaInput, angular](https://arena.dravensoft.org/frameworks/angular/components/forms/arena-input/ArenaInput.prompt.md): how to use it, with its Do and its Don't. - [ArenaRadioGroup, angular](https://arena.dravensoft.org/frameworks/angular/components/forms/arena-radio-group/ArenaRadioGroup.prompt.md): how to use it, with its Do and its Don't. - [ArenaRadio, angular](https://arena.dravensoft.org/frameworks/angular/components/forms/arena-radio/ArenaRadio.prompt.md): how to use it, with its Do and its Don't. - [ArenaSelect, angular](https://arena.dravensoft.org/frameworks/angular/components/forms/arena-select/ArenaSelect.prompt.md): how to use it, with its Do and its Don't. - [ArenaSwitch, angular](https://arena.dravensoft.org/frameworks/angular/components/forms/arena-switch/ArenaSwitch.prompt.md): how to use it, with its Do and its Don't. - [ArenaTextarea, angular](https://arena.dravensoft.org/frameworks/angular/components/forms/arena-textarea/ArenaTextarea.prompt.md): how to use it, with its Do and its Don't. - [ArenaBoardColumn, angular](https://arena.dravensoft.org/frameworks/angular/components/layout/arena-board-column/ArenaBoardColumn.prompt.md): how to use it, with its Do and its Don't. - [ArenaBoard, angular](https://arena.dravensoft.org/frameworks/angular/components/layout/arena-board/ArenaBoard.prompt.md): how to use it, with its Do and its Don't. - [ArenaFigure, angular](https://arena.dravensoft.org/frameworks/angular/components/layout/arena-figure/ArenaFigure.prompt.md): how to use it, with its Do and its Don't. - [ArenaGrid, angular](https://arena.dravensoft.org/frameworks/angular/components/layout/arena-grid/ArenaGrid.prompt.md): how to use it, with its Do and its Don't. - [ArenaHero, angular](https://arena.dravensoft.org/frameworks/angular/components/layout/arena-hero/ArenaHero.prompt.md): how to use it, with its Do and its Don't. - [ArenaMain, angular](https://arena.dravensoft.org/frameworks/angular/components/layout/arena-main/ArenaMain.prompt.md): how to use it, with its Do and its Don't. - [ArenaScrollerItem, angular](https://arena.dravensoft.org/frameworks/angular/components/layout/arena-scroller-item/ArenaScrollerItem.prompt.md): how to use it, with its Do and its Don't. - [ArenaScroller, angular](https://arena.dravensoft.org/frameworks/angular/components/layout/arena-scroller/ArenaScroller.prompt.md): how to use it, with its Do and its Don't. - [ArenaSection, angular](https://arena.dravensoft.org/frameworks/angular/components/layout/arena-section/ArenaSection.prompt.md): how to use it, with its Do and its Don't. - [ArenaSiteFooter, angular](https://arena.dravensoft.org/frameworks/angular/components/layout/arena-site-footer/ArenaSiteFooter.prompt.md): how to use it, with its Do and its Don't. - [ArenaSkipLink, angular](https://arena.dravensoft.org/frameworks/angular/components/layout/arena-skip-link/ArenaSkipLink.prompt.md): how to use it, with its Do and its Don't. - [ArenaAppBar, angular](https://arena.dravensoft.org/frameworks/angular/components/navigation/arena-app-bar/ArenaAppBar.prompt.md): how to use it, with its Do and its Don't. - [ArenaBottomNavItem, angular](https://arena.dravensoft.org/frameworks/angular/components/navigation/arena-bottom-nav-item/ArenaBottomNavItem.prompt.md): how to use it, with its Do and its Don't. - [ArenaBottomNav, angular](https://arena.dravensoft.org/frameworks/angular/components/navigation/arena-bottom-nav/ArenaBottomNav.prompt.md): how to use it, with its Do and its Don't. - [ArenaBreadcrumbs, angular](https://arena.dravensoft.org/frameworks/angular/components/navigation/arena-breadcrumbs/ArenaBreadcrumbs.prompt.md): how to use it, with its Do and its Don't. - [ArenaBulkActionBar, angular](https://arena.dravensoft.org/frameworks/angular/components/navigation/arena-bulk-action-bar/ArenaBulkActionBar.prompt.md): how to use it, with its Do and its Don't. - [ArenaCommandPalette, angular](https://arena.dravensoft.org/frameworks/angular/components/navigation/arena-command-palette/ArenaCommandPalette.prompt.md): how to use it, with its Do and its Don't. - [ArenaMenu, angular](https://arena.dravensoft.org/frameworks/angular/components/navigation/arena-menu/ArenaMenu.prompt.md): how to use it, with its Do and its Don't. - [ArenaPageHead, angular](https://arena.dravensoft.org/frameworks/angular/components/navigation/arena-page-head/ArenaPageHead.prompt.md): how to use it, with its Do and its Don't. - [ArenaPagination, angular](https://arena.dravensoft.org/frameworks/angular/components/navigation/arena-pagination/ArenaPagination.prompt.md): how to use it, with its Do and its Don't. - [ArenaSegmentedControl, angular](https://arena.dravensoft.org/frameworks/angular/components/navigation/arena-segmented-control/ArenaSegmentedControl.prompt.md): how to use it, with its Do and its Don't. - [ArenaSideNavCollapsible, angular](https://arena.dravensoft.org/frameworks/angular/components/navigation/arena-side-nav-collapsible/ArenaSideNavCollapsible.prompt.md): how to use it, with its Do and its Don't. - [ArenaSideNavItem, angular](https://arena.dravensoft.org/frameworks/angular/components/navigation/arena-side-nav-item/ArenaSideNavItem.prompt.md): how to use it, with its Do and its Don't. - [ArenaSideNavSection, angular](https://arena.dravensoft.org/frameworks/angular/components/navigation/arena-side-nav-section/ArenaSideNavSection.prompt.md): how to use it, with its Do and its Don't. - [ArenaSideNav, angular](https://arena.dravensoft.org/frameworks/angular/components/navigation/arena-side-nav/ArenaSideNav.prompt.md): how to use it, with its Do and its Don't. - [ArenaTab, angular](https://arena.dravensoft.org/frameworks/angular/components/navigation/arena-tab/ArenaTab.prompt.md): how to use it, with its Do and its Don't. - [ArenaTabs, angular](https://arena.dravensoft.org/frameworks/angular/components/navigation/arena-tabs/ArenaTabs.prompt.md): how to use it, with its Do and its Don't.