Welcome to the TUK component explorer

Box Layouts are designed to give you a headstart with your application layout. Box layouts contain horizontal navigation, page heading and a container to add more components.

Sidebar Layouts provide an alternate master layout for your application. Sidebar layouts contain vertical navigation, header and a container to add more components.

Cards are flexible and extensible content containers. Use cards for webapp layouts.

Grids are required to use grid cards. Any kind of layout can be built using grids.

Grid cards are pre-defined cards that can be used to create dashboards and webapp pages. The cards have certain UX that can be modified to fit the needs of various use cases.

Use this pattern for primary navigation of a webapp. The navigation can be easily modified to add menu items and action item icons.

Use this pattern for in-app navigation.

Use these patterns where pagination is required. The patterns can be used with lists, tables and carousels.

Use tabs for secondary navigation in webapp pages. Tabs are a great way to organize content across different screens, data sets, and other interactions.

Use this pattern for primary navigation of a webapp. The navigation can be easily modified to add menu items and action item icons.

Use card headings with Grid cards, tables and lists.

Page headings are designed to use with primary navigation in pages.

Advance tables give you complete control over your data display with filters, actions, sort, and search.

Lists are simple way of displaying data in table format.

Use action panels in form layouts where an action is required.

Standard dropdowns in various styles and configurations.

Form layouts are pre-built layouts which can be easily modified to fit the needs of various use cases.

This is basic form field. It has a few layout options and styles with labels.

Sign in layouts are pre-designed pages used for authentication and registration.

Standard form elements with various styles and layout options.

Use modals to inform users about specific action they need to take along with a message. Modals have pre-designed layout with certain UX that can be easily modified.

Use notifications for low attention messages to inform users. These can be only information or coupled with an action that users can take.

Use these patterns for system alerts.

Avatars present the users identity in the digital space. This category has different variations with images and text.

Badges are used when an element needs to be highlighed and/or differentiated. They are used for emphasizing certain information.

Buttons communicate actions that users can take and are used throughout the user interface. They provide relevant actions in context to where the user is.

Grouped buttons provide multiple, relevant actions throughout the interface that the user can interact with. They are used to reduce complexity of multiple actions.

Popovers are temporary views that show on a content screen when a user clicks within a defined area when an additional action is needed.

Progress bars inform users of how close they are to completing a set of tasks by showing the proportion of completion.

A tooltip is a brief, informative message that appears when a user interacts with an element. It provides additional information for clarification.

Use this pattern for keeping track of events.

An overview of the progress and sales.

Simple notes for every usecase.

An essential part of inbound marketing, the CTA section prompts the user to take a certain action with the objective of converting the user into a lead/customer.

Frequently Asked Questions provide valuable information to the users about your product or service that helps them make an informed decision.

It comprises of the information and work description.

The purpose of a blog is to provide users with relevant information that they might be seeking, in the form of an article. Blogs help drive traffic to your website.

Data about the chats.

Cloud logos are a display of multiple logos typically showing the brands and organizations that the company has worked for, or in collaboration with.

The contact section’s main purpose is to help people get in touch with you. It can only be contact information, a form or a map showing directions to your location.

It comprises of the information and work description.

The features section prominently highlights what you’re offering and how the customer will benefit from those services.

The footer comes at the bottom of the page and showcases information and navigation options as per your business goals.

The hero section is the front and center of the page and it is the most prominent area in the homepage layout that showcases your brand.

Newsletters keep prospects and customers upto date about developments and product/service features when they subscribe to it.

The pricing section highlights different packages that you are offering at various price points. They highlight the features and benefits that the user would be getting in a package.

It comprises of the cards to display multiple products or deals.

The stats section highlights key statistics that you want to showcase to customers and prospects in order to present expert authority.

The team section helps potential customers and clients get to know the people they might be working with and can help put a face to the brand.

Testimonials are customer reviews of your product or services and help you to look more valuable to those who are exploring it for the first time. They are used for social proofing.