Usage
A required class to set up a layout system.
<div className="jun-layout">Modifiers
Controlling height
Use jun-layout-h-[*] to change the height of the layout (default as 100svh - env(safe-area-inset-bottom)).
<div className="jun-layout jun-layout-h-[500px] lg:jun-layout-h-[800px]">⚠️ Warning
Don't use h-[*] from Tailwind directly because the layout uses CSS variables
to control other parts of the layout.
Standalone app
Use jun-layout-standalone to create apps like POS (Point of Sale) or chat applications where the layout fits to the screen.
<div className="jun-layout jun-layout-standalone">Disable transition
Use jun-layout-noTransition to remove transitions from all layout classes.
<div className="jun-layout jun-layout-noTransition">API
| Class | Description |
|---|---|
jun-layout | Set as root layout (Required) |
jun-layout-h-[*] | Custom the height of the layout |
jun-layout-standalone | Make the layout fixed to its height, useful for building standalone app like a POS or a chat app |
jun-layout-noTransition | Set the transitions of all layout classes to none |