📄️ Card
The Card component wraps other components in a styled container with an optional heading, giving you a visually distinct section on the form. Use it to group related fields together and separate them visually from the rest of the form.
📄️ Columns
The Columns component splits a section of your form into side-by-side vertical columns. You drop other components into each column to build multi-column layouts such as a two-column form, a card row with equal-width panels, or a narrow label column alongside a wide input column. The number of columns, their widths, and the spacing between them are all configurable.
📄️ Container
The Container component groups other components together into a single box, using CSS flex, grid, or block layout to arrange them. Use it to build rows, columns, or grids of other components, and to apply a shared background, border, or spacing to the group as a whole.
📄️ Drawer
The Drawer component is a panel that slides in from an edge of the screen to show content on top of the form, without navigating away from it. Use it for things like a quick-edit form, supplementary details, or an action that doesn't need a full page.
📄️ Horizontal Layout
The horizontal layout is an application layout built for public-facing portals. Instead of the default layout's collapsible sidebar menu, it places navigation along the top of the page, which suits landing pages and public sites where a full-width content area matters. It is part of Core, so it is available to every Shesha application without any extra packages.
📄️ Key Information Bar
The Key Information Bar component lays out a row (or column) of separate content areas side by side, each separated by a configurable divider line. Use it for a strip of key stats, labels, or mixed content that should sit in evenly-spaced columns, with full control over each column's own layout and contents.
📄️ Panel
The Panel component helps group and visually segment content inside a form. It acts as a flexible container that can include headers, icons, and conditional logic to show or hide its contents. Panels make forms easier to scan and more organized.
📄️ Section Separator
The Section separator is a line that is used to organize content by dividing it into sections, it provides a structured layout that will make it easier to locate sections.
📄️ SizableColumns
The SizableColumns component splits its area into a row of columns that the end user can resize by dragging the divider between them at runtime. Use it when a fixed-width Columns layout is too rigid and users need to adjust how much space each side gets.
📄️ Subform
In Shesha, a form is a screen that displays and collects data about one thing - a person, an order, a property. Most real-world records are not just one flat list of fields. A person has an address. An order has a customer. A job has a primary contact. These related pieces of data belong to separate records in your database, but you often want to show and edit them together on the same screen.
📄️ Tabs
The Tabs component is used to organize content into separate sections or panes, where users can switch between these sections by clicking on the tabs. Each tab represents a different section, and only one section is visible at a time.
📄️ Wizard
The Wizard component enables multi-step forms by segmenting fields across several pages with navigation controls. It's ideal for complex data entry processes where progressive disclosure improves the user experience.