# CoreAI Design System Shared components, patterns, and tools for building consistent, accessible CoreAI experiences. Help designers code and help engineers design. CoreAI builds on Fluent UI v9 with shared themes, component defaults, extensions, copy-and-adapt templates, and UX guidance. ## Get started - [Set up the package](/coreai-design-system/guides/package.md). - [Use the examples](/coreai-design-system/guides/setup.md). - [Build with your agent](/coreai-design-system/guides/use-with-agents.md): copy a starter prompt or install the optional reusable skill. ## Give your agent CoreAI guidance Start at [llms.txt](/coreai-design-system/llms.txt). Share the [starter prompt](/coreai-design-system/guides/use-with-agents.md) with your coding agent or add the [reusable skill](/coreai-design-system/guides/package-skill.md) to your repository. Agents read the same guidance, APIs, and example source as people over ordinary HTTPS. - [Open the Figma library](https://www.figma.com/design/eXfSQrRg3poHRgmr0ivN5V/CoreAI-DS?node-id=0-1). ## Foundations and patterns - [Colors](/coreai-design-system/foundations/colors.md) - [Typography](/coreai-design-system/foundations/typography.md) - [Content](/coreai-design-system/foundations/content.md) - [Materials](/coreai-design-system/foundations/materials.md) - [Theming](/coreai-design-system/foundations/theming.md) - [Web UI guidelines](/coreai-design-system/patterns/web-ui-guidelines.md) - [Forms](/coreai-design-system/patterns/forms.md) ## Component and template catalog ### 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): An avatar shows an image or text to represent a person or group as well as give additional information like their status and activity. If you need to represent many avatars, try an avatar group. - [AvatarGroup](/coreai-design-system/components/avatar-group.md): Displays a collection of avatars for multiple people or entities, with overflow. Subcomponents: AvatarGroupItem, AvatarGroupPopover. - [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/card-footer.md): Footer region of a Card that lays out related actions. - [CardHeader](/coreai-design-system/components/card-header.md): Header region of a Card for a title, subtitle, image, and actions. - [CardPreview](/coreai-design-system/components/card-preview.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/carousel-nav.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/color-picker.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. - [CompoundButton](/coreai-design-system/components/compound-button.md): Button with an additional line of secondary text below the label. - [CopyButton](/coreai-design-system/components/copy-button.md): A Button preset that copies text to the clipboard with transient confirmation. - [CoreAIFluentProvider](/coreai-design-system/components/core-aifluent-provider.md): Root provider applying the CoreAI theme, global styles, and component defaults over Fluent's FluentProvider. - [Counter Badge](/coreai-design-system/components/counter-badge.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/date-time-picker.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/dropdown-button.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/file-upload.md): Styled drop zone exposing stable react-dropzone options and render state. - [Image](/coreai-design-system/components/image.md): Images, like photos and illustrations, help reinforce a message and express your product or app's style. - [InfoButton](/coreai-design-system/components/info-button.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. - [InteractionTag](/coreai-design-system/components/interaction-tag.md): Tag with primary and secondary actions. Subcomponents: InteractionTagPrimary, InteractionTagSecondary. - [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/link-button.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/menu-button.md): Button with a trailing chevron that opens a menu. - [MenuList](/coreai-design-system/components/menu-list.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. - [PresenceBadge](/coreai-design-system/components/presence-badge.md): Badge that shows a presence status such as available, away, or busy. - [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/rating-display.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. - [SplitButton](/coreai-design-system/components/split-button.md): Button with a primary action and a secondary action that opens a menu. - [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. - [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. - [TagGroup](/coreai-design-system/components/tag-group.md): Container for multiple Tag or InteractionTag controls. - [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. - [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. - [toMountNodeProps](/coreai-design-system/components/to-mount-node-props.md): toMountNodeProps component reference and examples. - [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/toggle-button.md): Button that can be toggled between checked and unchecked states. - [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/details-list.md): Accessible, responsive, copy-paste starter for details panels with 2 variants. - [Empty state](/coreai-design-system/templates/empty-state.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/filterable-list.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. - [Breadcrumb Link](/coreai-design-system/templates/react-router-breadcrumb-link.md): CoreAI BreadcrumbButton adapter for React Router navigation. - [Card Link](/coreai-design-system/templates/react-router-card-link.md): CardLink adapter for accessible React Router navigation. - [Link](/coreai-design-system/templates/react-router-link.md): CoreAI Link adapter for React Router navigation. - [Link Button](/coreai-design-system/templates/react-router-link-button.md): Button-styled adapter for React Router navigation. - [Menu Item Link](/coreai-design-system/templates/react-router-menu-item-link.md): CoreAI MenuItemLink adapter for React Router navigation. - [Tab Link](/coreai-design-system/templates/react-router-tab-link.md): CoreAI Tab adapter for React Router navigation. - [Tab Link List](/coreai-design-system/templates/react-router-tab-link-list.md): Route-aware CoreAI TabList for React Router navigation. - [Shell and navigation](/coreai-design-system/templates/shell-and-navigation.md): Nav provides access to an application’s primary destinations through hierarchical links and categories. ## Help and feedback - [Resources](/coreai-design-system/overview/resources.md) - [FAQs](/coreai-design-system/overview/faqs.md) - [Release history](/coreai-design-system/overview/changelog.md) - [GitHub issues](https://github.com/microsoft/coreai-design-system/issues) ## Resources - [Components](/coreai-design-system/index.md#components) - [Figma](https://www.figma.com/design/eXfSQrRg3poHRgmr0ivN5V/CoreAI-DS?node-id=0-1) - [npm](https://www.npmjs.com/package/@coreai-ds/react-components)