Oihana Next UI - 0.48.0

Application logo

Layout Component

Display Modes

Flex Mode (default)

Item 1
Item 2
Item 3
Item 4

Grid Mode

Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 6

Masonry Mode

Tile 1
Tile 4
Tile 2 (tall)
Tile 5
Tile 3
Tile 6 (taller)

None Mode (plain div)

Plain content 1
Plain content 2
Plain content 3

Flex Layouts

Horizontal with Wrap

1
2
3
4
5

Vertical Column

Top
Middle
Bottom

Centered Content

A
B
C

Space Between

Start
Middle
End

Grid Layouts

2 Columns Grid

1
2
3
4

4 Columns Grid

1
2
3
4
5
6
7
8

3×2 Grid (Rows × Cols)

1
2
3
4
5
6

Centered Grid Items

A
B
C
D

Masonry Layouts

3 Columns — variable heights

Short
Medium
Medium
Tall
Short
Short
Short
Very tall
Tall

Responsive (1 → 2 → 3 → 4 columns)

Redimensionner la fenêtre pour voir les colonnes s'ajuster

Item 1
Item 2 (tall)
Item 3
Item 4
Item 5 (very tall)
Item 6
Item 7
Item 8

columnClassName — style par colonne

A
B (tall)
C
D
E
F

Comparaison Masonry vs Grid — mêmes items, hauteurs variables

display="grid" — hauteurs uniformisées

Short
Tall
Medium
Short

display="masonry" — hauteurs naturelles

Short
Medium
Tall
Short

Responsive Layouts

Responsive Grid (1 → 2 → 3 → 4 columns)

Try resizing your browser: 1 col on mobile, 2 on tablet, 3 on desktop, 4 on xl screens

01
02
03
04
05
06
07
08

Responsive Flex (Column → Row)

Column on mobile, row on desktop

Header
Content
Footer

Responsive Gap & Padding

Small spacing on mobile, larger on desktop

1
2
3
4
5
6

Advanced Examples

Dashboard Layout

Header
Sidebar
Main Content
Footer

Card Grid with Custom Styling

Card 1

Content here

Card 2

Content here

Card 3

Content here

Auto-fit Grid (Responsive without breakpoints)

Using autoCols for automatic responsive layout

Auto 1
Auto 2
(taller)
Auto 3
Auto 4
Auto 5

ItemsLayout + LinkCard

Une collection, un composant de ligne, trois dispositions. Le dernier élément n'est pas navigable : même carte, sans lien ni survol.

grid
Phare au matin
Phare au matinHors de portée

🔑 ItemComponent est un composant, pas une fonction de rendu : une page rendue côté serveur peut nommer le composant de ses lignes, elle ne peut pas lui passer une fonction. itemPropName dit sous quel nom chaque ligne reçoit sa valeur — ici le défaut, item.

Cookies : setCookie encode, la lecture rend la saisie

Saisi
"100%"
Cookie écrit
—
Relu
—

Navbar — end section

Default

<Navbar right={ … } />

Theme control dropped

controls={ { theme : false } }

Preferences kept for a wide screen

controls={ { lang : 'hidden lg:inline-flex' , theme : 'hidden lg:inline-flex' } }

Narrow bar — the title is cut, the controls stay

min-w-0 + truncate — a bar only has half its width for the title

Each key of controls takes true, false or a class name applied to a wrapper — the breakpoint stays the application's.