HomepageDocumentation
CMS
Data shapes in husar.aiCreating models in CMS Husar.aiCreate Shapes With AIMedia viewer
Markdown
Markdown color code blockhr in markdownAdding images in markdownMarkdown nested listsMarkdown new lineMarkdown reference style linkstables in markdownMarkdown boldInline code in markdownHeaders in MarkdownMarkdown italicsMarkdown url linksOrdered list in markdownMarkdown quoteMarkdown strikethroughUnordered list in markdownBasicsAdvanced mdMarkdown Documentation

What are data shapes when working with React and Tailwind CSS?

In this video I will show you what so-called data shapes are and how to use them in your daily work with React and Tailwind CSS.

Example of how data shapes work

Definition

Data shapes (data shapes) are generic structures from which ready-made React components can be created, combining the data provided, content from the CMS and Tailwind CSS code. They allow you to build user interfaces quickly and consistently, while keeping your code flexible and scalable.

Ways to use data shapes

You can use data shapes in two ways:

  1. Import from CMS: You import ready-made component configurations directly from your content management system.
  2. Dynamic generation: You create components based on data structures in your code - these can be models or views.

System usage presentation

Practical example

In the illustration below, you can see the home page, built from several data shapes. Each is populated with appropriate content, ideally suited to the role and view in which it is located.

Home page composed of data shapes

Summary

Data shapes are an invaluable aid to organising your code, automating your work and maintaining the consistency of your web interfaces. They allow you to easily scale your project and embed solutions of your choice regardless of the content source. Try using them on your next project!