Microsoft release 3 more tools to help developers build better Microsoft Teams apps

Last week, I blogged about a new Microsoft Teams UI Kit that Microsoft had made available to help developers design and build applications for Microsoft Teams that looked like they belonged there.

Now, Microsoft has added to that with three more tools to aid app developers. These were announced in a blog post on the Microsoft Teams Developer Blog.

New: UI Library of React Controls

This is a React library you can reference and use in your own projects. It implements many of the designs that are described and shown in the Teams UI Kit. That means that you don’t even have to create the components that you want to use and saw designs for in the UI Kit: you can just import them from here!

More information and the full source of the controls on GitHub: GitHub – OfficeDev/microsoft-teams-ui-component-library: Component library enhanced experiences styled for use in Microsoft Teams custom applications.

New: UI Library Playground

You can use the UI Library Playground to explore how different components look, to get a feel for which ones you want to use. For each component, you can see how it appears in each of the standard Teams modes: light, dark and high-contrast.

You can also choose to view any component in a mobile or tablet view to see how it renders there, and – a really nice addition – you can emulate various different color blindness conditions:

I think this is a really good idea to help drive more accessible applications. For each component, there is also an Accessibility tab showing any violations:

New: Teams UI Sample App

Finally, there is also a sample Microsoft Teams app which showcases these controls. Right now, this is a code sample in GitHub with instructions so that you can get it running in your environment and then add to Microsoft Teams. It would be great to see Microsoft host this somewhere and offer it as a Teams App in the App Store, to act as a showcase for development.