This document describes what are surfaces and how to use them.
A surface is a container which holds content. It should use a different color from the background which is good for readability.
The main surface component is Ui.Box.
<Ui.Box>"👋 I am on a surface!"</Ui.Box>
You can arrange any number of surfaces on a screen in any number of ways just always make sure that there are gaps between the surfaces.
This gap between signifies the relation between them:
<> <Ui.Grid width={Ui.Size.Em(20)} gap={Ui.Size.Em(5)}> <Ui.Box>"I don't have anything to do with that! ➡️"</Ui.Box> <Ui.Box>"⬅️ Who is that? "</Ui.Box> </Ui.Grid> <Ui.Grid width={Ui.Size.Em(20)} gap={Ui.Size.Em(0.5)}> <Ui.Box>"I know that! ➡️"</Ui.Box> <Ui.Box>"⬅️ Hi there! "</Ui.Box> </Ui.Grid></>
Mint UI is a design system and component library for building websites, web and desktop applications.