# CoreAI documentation for agents Docs/skill v0.1.1; documented @coreai-ds/react-components v0.12.0. Use ordinary HTTPS GET to read these static Markdown files. Reading needs no login or client connection. Install or update the repository skill before implementing UI; preserve local instructions. ## Start here - [Current versions](/coreai-design-system/version.json): small docs/skill and package version manifest; check once per task. - [Reusable skill](/coreai-design-system/source/package/SKILL.md): review and install or update before UI work. - [Agent workflow](/coreai-design-system/guides/AgentWorkflow.md): targeted retrieval, version checks, imports, and fallbacks. - [Build with your agent](/coreai-design-system/guides/UseWithAgents.md): starter prompt and skill setup. - [Starter prompt](/coreai-design-system/agent-prompt.txt): add the user's task and paste into an agent. - [Exact routes and source metadata](/coreai-design-system/llms/index.json): use only when needed; do not fetch every page. Fetch this index once per task. Choose the relevant pages below; reuse fetched documents. Human directory URLs map to .md files, preserving /coreai-design-system/; the homepage maps to /coreai-design-system/index.md. CoreAI UX guidance overrides upstream demonstrations. Check installed package versions before implementing. Templates are copy-and-adapt source, not package exports. Report retrieval failures; never invent APIs. # CoreAI design system Help designers code and help engineers design. Explore component guidance, working examples, and copy-and-adapt templates. This catalog contains 110 pages and 714 examples. [Get started](/coreai-design-system/guides/Package.md) ### Getting started - [Home](/coreai-design-system/index.md): The guide for building CoreAI experiences on the web - [Introduction](/coreai-design-system/overview/Introduction.md): CoreAI builds on Fluent UI v9. It adds a shared visual language, themes, and component defaults. Components without CoreAI changes pass through from Fluent. - [Changelog](/coreai-design-system/overview/Changelog.md): Release notes for @coreai-ds/react-components, grouped by version. - [NPM package](/coreai-design-system/guides/Package.md): Install the package, configure the provider, and find implementation guidance. - [FAQ](/coreai-design-system/overview/Faq.md): Answers about CoreAI, Fluent, setup, components, and agents. ### Foundations - [Typography](/coreai-design-system/foundations/Typography.md): Type scale, weight system, and readability rules. - [Colors](/coreai-design-system/foundations/Colors.md): Palette, semantic roles, and token naming conventions. - [Content](/coreai-design-system/foundations/Content.md): Write clear, useful product content and get the right level of design support. - [Surfaces](/coreai-design-system/foundations/Surfaces.md): Surface tiers, depth, and visual hierarchy. - [Spacing](/coreai-design-system/foundations/Spacing.md): CoreAI spacing guidance. - [Layout](/coreai-design-system/foundations/Layout.md): CoreAI layout guidance. ### Components - [Accordion](/coreai-design-system/components/Accordion.md): An accordion groups sections of related content that can be opened and closed. Accordions decrease cognitive load by letting people choose which sections they see, such as questions in an FAQ. - [Avatar](/coreai-design-system/components/Avatar.md): Represent one person or group with an image or text, plus optional presence and activity indicators. Use AvatarGroup for multiple avatars. - [Avatar group](/coreai-design-system/components/AvatarGroup.md): Represent multiple people or groups with an avatar spread, stack, or compact pie; show overflow when space is limited. - [Badge](/coreai-design-system/components/Badge.md): A badge is a visual indicator that communicates a status or description of an associated component. - [Breadcrumb](/coreai-design-system/components/Breadcrumb.md): A breadcrumb helps people quickly understand where they are within the hierarchy of a large and complex site or app. - [Button](/coreai-design-system/components/Button.md): A button triggers an action or event. Use buttons for important actions like submitting a response, committing a change, or moving to the next step. - [Card](/coreai-design-system/components/Card.md): A card is a container that holds information and actions related to a single concept or object, like a document or a contact. Cards can give information prominence and create predictable patterns. - [CardFooter](/coreai-design-system/components/CardFooter.md): Footer region of a Card that lays out related actions. - [CardHeader](/coreai-design-system/components/CardHeader.md): Header region of a Card for a title, subtitle, image, and actions. - [CardPreview](/coreai-design-system/components/CardPreview.md): Preview region of a Card for prominent media or content. - [Carousel](/coreai-design-system/components/Carousel.md): A carousel is a dynamic user interface component that allows users to cycle through content both linearly and cyclically. - [CarouselNav](/coreai-design-system/components/CarouselNav.md): Index-based pagination control for a Carousel. - [Checkbox](/coreai-design-system/components/Checkbox.md): Checkboxes let people select multiple options from a group or switch a single option on or off. To restrict someone to picking one option, try a radio group or dropdown. - [CodeBlock](/coreai-design-system/components/CodeBlock.md): Display source code as plain text or with syntax highlighting. - [ColorPicker](/coreai-design-system/components/ColorPicker.md): Lets users browse and select a color across a spectrum. Subcomponents: ColorArea, ColorSlider, AlphaSlider. - [Combobox](/coreai-design-system/components/Combobox.md): Text field combined with a dropdown for selecting an option or typing a custom value. - [Compound button](/coreai-design-system/components/CompoundButton.md): A compound button includes a main title and an additional description of the title. Use it when it’s helpful to include more detail. - [CopyButton](/coreai-design-system/components/CopyButton.md): A Button preset that copies text to the clipboard with transient confirmation. - [CoreAIFluentProvider](/coreai-design-system/components/CoreAIFluentProvider.md): Root provider applying the CoreAI theme, global styles, and component defaults over Fluent's FluentProvider. - [Counter Badge](/coreai-design-system/components/CounterBadge.md): Badge that displays a numerical count. - [Data grid](/coreai-design-system/components/DataGrid.md): Presents data in a two-dimensional DataGrid format, arranged in columns and rows in a rectangular form. - [DateTimePicker](/coreai-design-system/components/DateTimePicker.md): Native browser input for picking a date, time, or related value. - [Dialog](/coreai-design-system/components/Dialog.md): A dialog is a window overlaid on the page to focus a task or message. - [Divider](/coreai-design-system/components/Divider.md): A divider groups sections of content to create visual rhythm and hierarchy. Use dividers along with spacing and text hierarchy to organize content in your layout. - [Drawer](/coreai-design-system/components/Drawer.md): A drawer is a secondary content surface that slides in from one edge of a layout. Use drawers for supplemental info and simple actions related to the main content. - [Dropdown](/coreai-design-system/components/Dropdown.md): A dropdown lets people choose one or more options from a list. It can be used in forms where the options require custom styling [or as a component to filter or sort information]. - [DropdownButton](/coreai-design-system/components/DropdownButton.md): A Dropdown with a labelled, button-like trigger instead of an input field. - [Field](/coreai-design-system/components/Field.md): A field is a combination of a label and any form component, like an input, text area, or dropdown. - [FileUpload](/coreai-design-system/components/FileUpload.md): Styled drop zone exposing stable react-dropzone options and render state. - [Illicon](/coreai-design-system/components/Illicon.md): Render saved dot-grid illustrations, convert icons in the browser, and export editable SVG. - [Image](/coreai-design-system/components/Image.md): Images, like photos and illustrations, help reinforce a message and express your product or app's style. - [Info button](/coreai-design-system/components/InfoButton.md): A button that reveals supplemental information in a popover. - [Info label](/coreai-design-system/components/InfoLabel.md): InfoLabel is a combination of a label and info button. When people interact with the info button, the information is surfaced in a Popover. - [Input](/coreai-design-system/components/Input.md): An input allows people to enter short, free form text data. If you need to collect more than one line of information, try textarea. - [Interaction tag](/coreai-design-system/components/InteractionTag.md): A tag is a representation of a value that someone has picked, like recipients for an email or categories on a planner task. - [Label](/coreai-design-system/components/Label.md): Labels give a name to a component or group of components. - [Link](/coreai-design-system/components/Link.md): Link component does not support breaking and wrapping onto the next line. In that case, use another Link component. - [LinkButton](/coreai-design-system/components/LinkButton.md): A native anchor styled with Fluent Button chrome for a real, navigable link. - [List](/coreai-design-system/components/List.md): A list is a collection of items or information repeated in a vertical stack. Use lists to make information easy to scan and access. - [Markdown](/coreai-design-system/components/Markdown.md): Renders a Markdown string as themed Fluent content, including code, tables, and math. - [Menu](/coreai-design-system/components/Menu.md): A menu is a hidden list of options that is shown when someone interacts with a trigger component, like a button, an avatar, or an icon. - [MenuButton](/coreai-design-system/components/MenuButton.md): Button with a trailing chevron that opens a menu. - [MenuList](/coreai-design-system/components/MenuList.md): Standalone list of menu actions, usually rendered inside a Menu. Subcomponents: MenuDivider, MenuGroup, MenuGroupHeader, MenuItem, MenuItemCheckbox, MenuItemLink, MenuItemRadio, MenuSplitGroup. - [Message bar](/coreai-design-system/components/MessageBar.md): A message bar communicates important information about the state of the entire product or the surface where it appears, such as a page, drawer, dialog, or card. - [Overflow](/coreai-design-system/components/Overflow.md): Low-level utility that moves items that don't fit into an overflow menu. Subcomponents: OverflowItem. - [Persona](/coreai-design-system/components/Persona.md): A persona is a representation of a person with additional contextual information. - [Popover](/coreai-design-system/components/Popover.md): A popover is a small surface that appears when someone interacts with a component to give nonessential, contextual information without blocking them. - [Portal](/coreai-design-system/components/Portal.md): Renders content at the end of the document, outside the normal DOM tree. - [Presence badge](/coreai-design-system/components/PresenceBadge.md): Presence indicates the user's current availability and status. - [Progress bar](/coreai-design-system/components/ProgressBar.md): Progress bars communicate system information, like how much cloud storage someone is using in OneDrive, or task information, like how long until a download is complete. - [Radio group](/coreai-design-system/components/RadioGroup.md): Radio groups let people select a single item from a short list. Use them in layouts that offer enough space to list up to five options or if it's important to view all options at once. - [Rating](/coreai-design-system/components/Rating.md): Rating is used to communicate user sentiment. It also allows customers to determine a sense of value of a good or a service. - [RatingDisplay](/coreai-design-system/components/RatingDisplay.md): Read-only display of an average rating with stars and count. - [Search box](/coreai-design-system/components/SearchBox.md): Search bars are one of the most used components in the system. It allows the users to access the right component with ease. - [Select](/coreai-design-system/components/Select.md): Wrapper around the native select element for choosing one option. - [Skeleton](/coreai-design-system/components/Skeleton.md): A skeleton lets people know that a section of content is loading without blocking other parts of the page. - [Slider](/coreai-design-system/components/Slider.md): A slider lets someone set a value from a given range. Sliders can take immediate effect, like a volume control, or can require a submission, like in a form. - [Spin button](/coreai-design-system/components/SpinButton.md): A spin button is a specialized input that lets someone easily increase or decrease a value within a set range, like dates in a month. Spin buttons are good for precise increments in small ranges. - [Spinner](/coreai-design-system/components/Spinner.md): Spinners visually communicate that something is processing. They’re used for loading states that take more than a second. - [Split button](/coreai-design-system/components/SplitButton.md): A split button lets someone take one of several related actions. The dominant action is the button label and additional actions are tucked away in a menu. - [Status indicator](/coreai-design-system/components/StatusIndicator.md): Status indicators communicate the status of an object, action, or process, including success, failure, error, and other informational states. - [Swatch picker](/coreai-design-system/components/SwatchPicker.md): A swatch picker lets people choose a color, image, or pattern in graphic and text editors. - [Switch](/coreai-design-system/components/Switch.md): A switch lets someone choose between two mutually exclusive options, like on or off. Activating a switch triggers an immediate change. - [Table](/coreai-design-system/components/Table.md): Low-level primitives for building customizable data tables. Subcomponents: TableHeader, TableHeaderCell, TableBody, TableRow, TableCell, TableSelectionCell, TableCellLayout. - [TabList Elevated](/coreai-design-system/components/TabElevated.md): A tablist allows people to switch between categories of related information without going to different pages. - [Tabs](/coreai-design-system/components/TabList.md): A tablist allows people to switch between categories of related information without going to different pages. - [Tag](/coreai-design-system/components/Tag.md): A tag is a representation of a value that someone has picked, like recipients for an email or categories on a planner task. - [Tag picker](/coreai-design-system/components/TagPicker.md): A TagPicker combines a text field and a dropdown giving people a way to select an option from a list or enter their own choice, these selections are represented as Tags. - [TagGroup](/coreai-design-system/components/TagGroup.md): Container for multiple Tag or InteractionTag controls. - [Teaching popover](/coreai-design-system/components/TeachingPopover.md): The Teaching popover component is a versatile tool to help users learn about a new feature. - [Text](/coreai-design-system/components/Text.md): Typography primitive for consistent, standardized text styling. - [Textarea](/coreai-design-system/components/Textarea.md): A textarea allows people to enter long, free-form text data, like a comment. If you only need someone to enter one line of information, try an input instead. - [Toast](/coreai-design-system/components/Toast.md): A toast displays temporary content that can be dismissed by user action or an application timeout. - [ToggleButton](/coreai-design-system/components/ToggleButton.md): Button that can be toggled between checked and unchecked states. - [toMountNodeProps](/coreai-design-system/components/ToMountNodeProps.md): Utility function that normalizes Portal mount node properties. - [Toolbar](/coreai-design-system/components/Toolbar.md): A toolbar gives access to frequently used actions related to someone’s current view or task, like text formatting in an editor. - [Tooltip](/coreai-design-system/components/Tooltip.md): A tooltip provides supplemental, contextual information elevated near its target component. Tooltips should be used to provide helpful but non-essential, plaintext information. - [Tree](/coreai-design-system/components/Tree.md): A tree is used to display a hierarchical view of nested data. It's useful for representing a menu structure, folder hierarchy, or nested categories at a glance. ### Templates - [Details List](/coreai-design-system/templates/DetailsList.md): Accessible, responsive, copy-paste starter for details panels with 2 variants. - [Empty state](/coreai-design-system/templates/EmptyState.md): Empty state templates explain why content is unavailable and guide people toward the next useful action across empty, error, no-permission, and no-result scenarios. - [Filter bar](/coreai-design-system/templates/FilterableList.md): A filter bar combines search and filter controls to help people narrow a data set while keeping active criteria visible and easy to revise. - [Page header](/coreai-design-system/templates/PageHeader.md): Figma design reference for a page header with a title, optional description, item counts, and primary or secondary actions. - [React Router / Breadcrumb Link](/coreai-design-system/templates/ReactRouterBreadcrumbLink.md): CoreAI BreadcrumbButton adapter for React Router navigation. - [React Router / Card Link](/coreai-design-system/templates/ReactRouterCardLink.md): CardLink adapter for accessible React Router navigation. - [React Router / Link](/coreai-design-system/templates/ReactRouterLink.md): CoreAI Link adapter for React Router navigation. - [React Router / Link Button](/coreai-design-system/templates/ReactRouterLinkButton.md): Button-styled adapter for React Router navigation. - [React Router / Menu Item Link](/coreai-design-system/templates/ReactRouterMenuItemLink.md): CoreAI MenuItemLink adapter for React Router navigation. - [React Router / Tab Link](/coreai-design-system/templates/ReactRouterTabLink.md): CoreAI Tab adapter for React Router navigation. - [React Router / Tab Link List](/coreai-design-system/templates/ReactRouterTabLinkList.md): Route-aware CoreAI TabList for React Router navigation. - [Shell and navigation](/coreai-design-system/templates/ShellAndNavigation.md): Nav provides access to an application’s primary destinations through hierarchical links and categories. - [Top nav](/coreai-design-system/templates/TopNav.md): Top nav anchors the application shell with global navigation and optional breadcrumb, link, and search regions. ### Guides - [Agent workflow](/coreai-design-system/guides/AgentWorkflow.md): Find the right CoreAI Markdown page, retrieve only what you need, and verify the result. - [Build with your agent](/coreai-design-system/guides/UseWithAgents.md): Give your coding agent CoreAI guidance, working examples, and accurate APIs with one prompt. - [Forms](/coreai-design-system/patterns/Forms.md): Find existing field guidance and a complete dialog-with-form example. - [React Router link slots](/coreai-design-system/guides/RouterLinkSlots.md): Shared source used by the copy-and-adapt React Router templates. - [Reusable agent skill](/coreai-design-system/guides/PackageSkill.md): Teach your agent to find CoreAI Markdown guidance quickly in any consuming repository. - [Styling with CSS Modules](/coreai-design-system/guides/StylingWithCssModules.md): Use RendererProvider to scope Griffel/Fluent styles into a CSS cascade `@layer`s so plain CSS/CSS Modules can override CoreAI component styles. - [Theming](/coreai-design-system/foundations/Theming.md): Apply CoreAI themes, fonts, defaults, and custom brand colors. - [Variations from Fluent](/coreai-design-system/guides/VariationsFromFluent.md): Full inventory of how @coreai-ds/react-components differs from stock Fluent UI v9, by component. ## Build versions - Docs and skill: 0.1.1 - @coreai-ds/react-components: 0.12.0 - @ctrl/tinycolor: 3.6.1 - @dnd-kit/core: 6.3.1 - @dnd-kit/sortable: 8.0.0 - @dnd-kit/utilities: 3.2.2 - @fluentui/react-components: 9.74.9 - @fluentui/react-icons: 2.0.343 - @fluentui/react-jsx-runtime: 9.4.6 - @fluentui/react-motion-components-preview: 0.15.9 - @fluentui/react-utilities: 9.26.7 - @types/react-window: 1.8.8 - react: 18.3.1 - react-dom: 18.3.1 - react-router-dom: 7.18.4 - react-window: 1.8.11 Fluent source: https://github.com/microsoft/fluentui/tree/ee856ea115d3a1c7b7a81cfd5b42613ff4bf9a06 [Coverage and provenance](/coreai-design-system/llms/index.json) CoreAI guidance takes precedence over upstream API examples. Templates are copyable source, not package exports.