Designing your Microsoft Teams app with basic Fluent UI components

You can design and build your Teams app from scratch with the following basic Fluent UI components. Designed as flat as possible, these components can work across different use cases, themes, and screen sizes.

The illustrations on this page show how components look in Teams default (light) and dark themes.

Microsoft Teams UI Kit

Based on Fluent UI react components, the Microsoft Teams UI Kit includes components and patterns that are designed specifically for building Teams apps. In the UI kit, you can grab and insert the components listed here directly into your design and see more examples of how to use each component.


Example shows an alert UI component.


Example shows a button UI component.

Example shows a breadcrumb UI component.


Example shows a card UI component.

Example shows a carousel UI component.


Example shows a checkbox UI component.


Example shows a coachmark UI component.

Contextual menu

Example shows a contextual menu UI component.


Example shows a dialog UI component.

Example shows a dropdown UI component.

Group list

Example shows a group list UI component.

Example shows a hyperlink UI component.


Example shows an input UI component.

Key value pair

Example shows a key value pair UI component.


Example shows a paragraph UI component.


Example shows a picker UI component.


Example shows a pivot UI component.

Progress indicator

Example shows a progress indicator UI component.


Example shows a radio UI component.


Example shows a scrollbar UI component.

Example shows a search box UI component.

Side panel

Example shows a side panel UI component.

Status label

Example shows a status label UI component.


Example shows a toast UI component.


Note: In Fluent UI, toggle is a type of checkbox.

Example shows a toggle UI component.


Example shows a tooltip UI component.

Other resources

Get code samples and implementation details for some of the components listed here and in the Microsoft Teams UI Kit.