📄️ Card
The Card component provides a styled container for grouping and displaying UI elements with optional headings, visibility control, and custom styling support. It acts as a layout and design tool that enhances readability and structure, especially in complex interfaces with multiple sections.
📄️ 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 is used to group components together. It is a wrapper component that can contain other components and apply styling to the group as a whole.
📄️ Drawer
The Drawer component allows the opening of a sliding panel from any side of the screen, ideal for temporary form content, quick settings, or auxiliary views. It supports extensive customization around behavior, size, positioning, and content.
📄️ 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 displays essential data in a compact, styled row or column format. Great for summaries and quick insights, it supports fully customizable layouts and styling per item.
📄️ 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 SizableColumn component enables the configuration of column layouts with resizable dimensions, making it useful for responsive or flexible grid-based designs. Each column can be defined in terms of its width, min/max boundaries, and additional styling.
📄️ 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.