Splitter

A component that divides your layout into resizable sections.

Source code

Click here to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

npx ui-thing@latest add splitter

We can put the parts together to build a simple layout with a resizable sidebar.

We can pass teh withHandle prop to the UiSplitterHandle component to show a handle.

We can even pass in a custom icon to display for the handle.

Do note that the handle will be rotated because of this class that is added to it [&[data-orientation=vertical]>div]:rotate-90.

We can use the collapsible prop to make the panels go down to the collapsedSize when the minSize is reached.

We can use the autoSaveId prop to persist the layout data into the local storage.

Try changing the layout and then refresh the page to see the layout persist.

Slider

An input where the user selects a value from within a given range.

Stepper

A set of steps that are used to indicate progress through a multi-step process.