Oihana Next UI - 0.9.0

Application logo

Flex Components

Flex Direction

Row (default)

1
2
3

Row Reverse

1
2
3

Column

1
2
3

Column Reverse

1
2
3

Alignment

Justify Content - Center

1
2
3

Justify Content - Between

1
2
3

Align Items - Center

1
2
3

Align Items - Stretch

1
2
3

Wrapping & Spacing

Flex Wrap

1
2
3
4
5
6

Large Gap (gap=6)

1
2
3

Gap X & Y Different

1
2
3
4

Complex: Center + Padding

A
B
C

Custom Component (as prop)

Flex as Section

Header
Content
Footer

Sortable Flex Component

Reorderable Tags (whole chips draggable, wrapping row)

React
Next.js
Tailwind
daisyUI
Motion
Biome
Bun
<SortableFlex
    gap={ 2 } wrap="wrap"
    defaultItems={ tags }
    renderItem={ tag => (
        <SortableFlexItem className="badge badge-lg">{ tag.label }</SortableFlexItem>
    )}
/>

Controlled Pills (workflow steps)

Current order :Audit → Code → Test → Commit → Push
1.Audit
2.Code
3.Test
4.Commit
5.Push
<SortableFlex
    gap={ 2 }
    items={ steps }
    onReorder={ next => setSteps( next ) }
    renderItem={ ( step , index ) => <SortableFlexItem ... /> }
/>

Vertical Direction (simple stacked items)

1React
2Next.js
3Tailwind
4daisyUI
5Motion
6Biome
7Bun
<SortableFlex
    direction="col"
    gap={ 2 }
    defaultItems={ items }
    renderItem={ ( item , index ) => <SortableFlexItem>...</SortableFlexItem> }
/>
// direction="col" : a lightweight vertical sortable, without the List markup

Inline Drag Handles (chips with a remove button)

JavaScript
TypeScript
CSS
A11y
I18n
<SortableFlex
    handle
    items={ skills }
    onReorder={ next => setSkills( next ) }
    renderItem={ skill => <SortableFlexItem>...</SortableFlexItem> }
/>
// handle : chips drag only from the inline handle, the remove button stays clickable

Async Reorder with API Call (optimistic revert on failure)

React
Next.js
Tailwind
daisyUI
Motion
Biome
Bun
<SortableFlex
    defaultItems={ tags }
    onReorder={ ( items ) => api.saveOrder( items ) }
    renderItem={ tag => <SortableFlexItem>...</SortableFlexItem> }
/>
// onReorder may return a promise : a rejection restores the previous order

Props Reference

PropTypeDescription
items / defaultItemsArrayControlled / uncontrolled items (each needs a stable id)
onReorderfunction(items, { from, to, item }) => void | Promise — a rejected promise reverts the order (uncontrolled)
renderItemfunction(item, index) => SortableFlexItem element
handlebooleanShow an inline drag handle (default false : whole items draggable)
getItemIdfunctionCustom accessor for item identity (defaults to item.id)
disabledbooleanDisable dragging for all items
direction / wrap / gap / ...Flex propsEvery other prop is forwarded to Flex (direction, wrapping, gaps, alignment, ...)