Essential UI Kit for React | Syncfusion

Layouts

List View

List View - Image

List View

The list view is a display format used in web applications where items such as text, images, or data are organized vertically in one or more columns for easy browsing. Each item is presented as a row, allowing users to view key details at a glance. This format is commonly used for displaying files, products, or records in an organized and accessible way, making it easier for users to find and interact with content.

Project Task List

In this demo, the list view presents key project task details for easy tracking. Each item features a checkbox for selection, a task title, a brief description, and relevant metadata, such as the due date and assigned user. It also highlights new tasks, making them easily identifiable.

Preview
Code

Loading Indicator

Inbox Messages List

In this demo, the list view for inbox messages displays a series of items with read and unread indications. Each item includes a name, title, description, and a timestamp indicating when the message was sent. It also features checkboxes on the left for selection and a star icon to mark important messages.

Preview
Code

Loading Indicator

Direct Messages List

In this demo, the list view displays a series of messages, each featuring a profile image, sender name, and message content. The timestamp is shown next to the sender name. Below each message, users can reply, mark the message as read, and access additional options via a More Options menu.

Preview
Code

Loading Indicator

Shopping Cart

In this demo, the list view displays a series of products, each with a product image, name, and other details. The price is shown next to the product, and any discounts are highlighted with a hint. The action buttons for adding, removing, saving, and sharing the product are also included.

Preview
Code

Loading Indicator

Country and Code List

In this demo, the list view displays country names, each with its flag image and country code. A search bar at the top allows users to easily search, and each entry includes text indicating the country abbreviation.

Preview
Code

Loading Indicator

Data Fields List

In this demo, the list view displays form fields, each with a drag icon on the left for reordering. At the bottom, there is a dynamic option to add a field. The design allows users to reorder the fields easily by dragging them, enabling customization of the data collection process.

Preview
Code

Loading Indicator

Short-Form Message List

In this demo, the list view displays a series of short-form messages, each with a profile image, name, message content, and timestamp. The More options icon next to each entry allows users to access additional options or actions related to the message.

Preview
Code

Loading Indicator

Chat Conversation List

In this demo, the list view displays a chat conversation list with user profile images and their messages. Each entry includes the user name, message content, and timestamp. A notification number beside each entry indicates new messages. The design also includes a search bar at the top, allowing users to find specific people, chats, or keywords quickly.

Preview
Code

Loading Indicator

Message List

In this demo, the list view displays a series of notifications. Each notification includes a title, a brief description, and the time it was received. The design is organized to help users stay informed about important news and events with ease.

Preview
Code

Loading Indicator

Task List

In this demo, the list view displays a series of tasks, each with an icon, description, due date, and an avatar on the right. The task information is well-organized, making it easy to identify and navigate through the list.

Preview
Code

Loading Indicator

File Directory List

In this demo, the list view displays an icon on the left representing file type, followed by the file name on the right. Below each file name, a breadcrumb shows its location within the folder hierarchy. The design is organized for clarity, allowing users to easily track and navigate through the directory.

Preview
Code

Loading Indicator