Designing your Microsoft Teams app with UI templates

Design your Microsoft Teams app faster with UI templates. The templates are a collection of Fluent UI-based components that work across common Teams use cases, giving you more time to figure out the best experience for your users.

Getting started with tools and samples

The following resources can help you design and develop your app using UI templates.

Microsoft Teams UI Kit

Grab UI templates for your app design from the Microsoft Teams UI Kit, which also includes extensive information about usage, anatomy, accessibility, and best practices.

Microsoft Teams UI Library

View and test individual Teams UI templates and related components in your browser.

Import these templates and related components directly into your Teams app project.

Sample app

Install a sample app to see how UI templates look and behave within Teams contexts.

List

You can use a list to display related items in a scannable format and allow users to take actions on an entire list or individual items.

Example shows a list UI template.

Top use cases

  • Display data
  • Contextual actions on app content

Dashboard

A dashboard displays different types of content in a central location (Teams personal app or tab). Users should be able to customize at least some of what they see on a dashboard.

Example shows a dashboard UI template.

Top use cases

  • Analyze data
  • Report metrics
  • Organize different information in one place

Form

Forms are used to collect, validate, and submit user input in a structured way. Clear labeling and logical groupings of input fields are critical for a good user experience.

Example shows a form UI template.

Top use cases

  • Sign in
  • User profiles
  • Settings
  • User input collection

Sign in

You can design app sign-in flows for different Teams contexts and identity providers. The following example includes single sign-on (SSO), which we recommend for the simplest authentication experience.

Example shows a sign in UI template.

Top use case

  • Authenticate users

Task board

A task board, sometimes called a kanban board or swim lanes, is a collection of cards often used to track the status of work items or tickets. It can also be used to sort any type of content into categories. You can edit and move the cards between columns.

Example shows a task board UI template.

Top use cases

  • Project management. Assigning tasks and tracking status
  • Brainstorming. Adding ideas in different categories
  • Sorting exercises. Organizing any kind of information into buckets

Data visualization

You can use different card sizes (single, double, and full) to stack and organize data visualizations on the same page. The cards scale to fit the column layout and fill in blank spaces.

Example shows a data visualization UI template.

Top use cases

  • Display complex information
  • Create a dashboard

Wizard

A wizard guides a user through several screens to complete a task (such as a setup process).

Example shows a wizard UI template.

Top use cases

  • Setup
  • Onboarding
  • First-run experiences

Empty state

The empty state template can be used for many scenarios, including sign in, first-run experiences, error messages, and more. It’s highly flexible⁠—adapt it to use one, a few, or all of the components in the following design.

Example shows an empty state UI template.

Top use cases

  • Sign in
  • Welcome messages and first-run experiences
  • Success messages
  • Error messages

Notification bar

A notification bar is a dedicated area for displaying a brief, important messages that do not require the user to take immediate action. Specific background colors and icons are associated with specific types of messages (see below).

Example shows notification bar templates.

Top use cases

  • Critical messages, errors, and warnings
  • Success messages
  • Informational or promotional messages

Left nav

Use the left nav to browse multiple pages within your Teams tab. In the following example, the left nav is between the channel list and tab content.

Example shows a left nav template.

Top use cases

  • Browse multiple pages within a Teams tab
  • Break down complex apps into multiple pages

Breadcrumbs are a navigational aid that convey your app’s hierarchy. They help users understand how the page they’re viewing fits into the overall experience and afford one-click access to higher levels in that hierarchy.

Example shows a breadcrumb template.

Top use cases

  • Communicate hierarchy
  • Navigation

Toolbar

A toolbar is a container for grouping a set of controls.

Example shows a toolbar template.

Top use cases

  • Contextual actions on app content
  • Contextual filter and find
  • Navigation and breadcrumbs

Stage

Stage offers a way for users to open an entity—like an image, file, or website—in Teams instead of opening it in another app or browser. The primary use case of stage is viewing; the surface should not be used for complex interactions.

(Implementation note: Build your stage using a large task module.)

Example shows a stage template.

Top use cases

  • Open an entity in Teams instead of another app or browser
  • Spotlight media or other content