JSPM

Button component is a fundamental element that displays a button or a component resembling a button. It serves as a key interactive element in your user interface, enabling users to perform actions, submit forms, or navigate through your application. The

Separator component is a versatile element used to visually or semantically separate content within a user interface. It provides a clear and distinct division between sections, enhancing the overall readability and organization of the content. Separators

The Bento Grid component is a versatile element designed to offer a responsive and adaptable grid system, ideal for organizing and showcasing content with efficiency and style. Featuring a distinctive skewed layout, it empowers developers to effortlessly

Command component is a fast, composable, and unstyled command menu designed for React. It provides a versatile and efficient way to create command menus in React applications. The component's flexibility allows developers to compose and customize the menu

Label component is an essential element for rendering accessible labels associated with form controls. It plays a crucial role in enhancing the usability and accessibility of user interfaces by providing a clear and descriptive label for associated input

Tabs component is a powerful navigation element that presents a set of layered sections of content, known as tab panels. Each tab panel is associated with a tab, and only one tab panel is displayed at a time. Users can switch between tabs to access differ

The Breadcrumb component is a fundamental navigational element that displays a hierarchical trail of links, typically representing the user's location within a website or application. It helps users understand their current position and facilitates naviga

Dialog component is a versatile and flexible window that overlays the primary window or another dialog, rendering the content underneath inert. It is commonly used to display important information, forms, or interactive content without navigating away fro

Navigation Menu component is a collection of links designed for navigating websites efficiently. It provides a structured and user-friendly way to organize and present various sections or pages of a website. The Navigation Menu enhances the user experienc

Form component is a powerful and efficient tool for building forms with React, leveraging React Hook Form for form management and Zod for schema-based validation. It provides a streamlined approach to handling form state, user input, and validation, ensur

Multi-select component allows users to choose multiple options from a list simultaneously. It typically features checkboxes next to each option in a dropdown menu, enabling users to select or deselect options as needed. This component enhances usability b

Calendar component is a versatile date field that empowers users to enter and edit dates with ease. Whether selecting dates for events, appointments, or deadlines, the Calendar provides an intuitive and interactive interface for managing date-related info

Checkbox component is a versatile control that empowers users to toggle between checked and unchecked states. It is designed to provide a user-friendly way to capture binary choices, enabling users to make selections in forms, surveys, or any interactive

Accordion seamlessly organizes information through a stack of interactive headings, each unlocking a dedicated section of content with a simple click. Elevating user experience, this component offers an intuitive interface, enabling users to effortlessly

Select component displays a list of options for the user to pick from, typically triggered by a button or a clickable area. It provides a dropdown menu that allows users to make a single selection from a set of predefined options. The Select component is

Scroll Area component enhances native scroll functionality, providing custom, cross-browser styling for a more visually appealing and consistent user experience. It is designed to augment the appearance and behavior of scrollable content within a containe

Dropdown Menu component displays a menu to the user, presenting a set of actions or functions triggered by a button. It provides a space-efficient and visually appealing way to organize and present options, enhancing the user experience by offering a cont

Input component is a fundamental building block for form interactions, providing a versatile and user-friendly way to capture user input. It can be used to display a form input field or a component that visually resembles an input field. The Input compone

Card component is a versatile container that elegantly displays content within a structured layout. Featuring a header, content section, and optional footer, the Card provides an organized and visually appealing way to present information, making it suita

The Number Ticker component is designed to animate numbers, counting either up or down to a specified target. It provides a dynamic way to display changing values, making it ideal for stats, counters, or any scenario where real-time numeric updates are ne

Table component is a responsive and versatile element designed for displaying tabular data. It provides an organized structure to present information in rows and columns, making it easy for users to consume data. The responsive nature of the Table compone

Carousel component is a dynamic and engaging user interface element built using Embla. It seamlessly incorporates motion and swipe functionality, providing an interactive way to showcase a series of content or images. The Carousel enhances user experience

Textarea component is a versatile element that allows users to input and edit multiline text. It provides an interactive form textarea or a component that looks like a textarea, offering a user-friendly way to capture and display larger amounts of text. T

Popover component is a versatile element that displays rich content in a portal, typically triggered by a button. It provides a visually appealing way to present additional information, options, or actions without cluttering the main interface. The Popove

Badge component is a versatile element designed to display badges or components resembling badges. Whether indicating status, notifications, or achievements, the Badge enhances visual communication within your user interface. It adds a touch of customizat

Text component is responsible for rendering text with different styles based on the specified HTML element (e.g., h1,h2,h3,h4,h5,h6, p, etc.). It dynamically applies predefined text styles to the text based on the provided `variant` prop. This package ena

Skeleton component is designed to be used as a placeholder while content is loading. It offers a visually appealing representation of the expected content structure, providing users with a sense of the layout and size of elements that will appear once the

Progress component is an essential element for displaying an indicator that visually represents the completion progress of a task. Often displayed as a progress bar, it provides users with a clear and intuitive way to track the advancement of a process or

A marquee component for infinite scrolling, displaying text, images, and videos with a smooth, continuous effect. Customizable scrolling speed, direction, and visual effects make it ideal for news tickers, image carousels, promotional banners, and video d

Tag Input is a versatile package designed to simplify the process of managing and displaying tags within input fields. With intuitive components like TagAutocomplete, TagPopover, TagList, and TagInput, users can effortlessly add, remove, and organize tags

Switch component is a user-friendly control that allows users to toggle between checked and not checked states. It provides a visual representation of a binary choice, where users can easily switch between two states. Switches are commonly used in setting

Alert Dialog component is a modal dialog designed to interrupt the user with important content, requiring immediate attention or a response. Whether conveying critical information, warnings, or seeking user input, the Alert Dialog ensures a focused intera

A date picker component allows users to select a specific date from a visual calendar interface. It streamlines date input by eliminating the need for manual entry, ensuring accurate and user-friendly date selection.

Sheet component extends the functionality of the Dialog component, providing a way to display additional content that complements the main content of the screen. It is particularly useful for presenting contextual information, settings, or secondary actio

Context Menu component displays a menu to the user, typically a set of actions or functions, triggered by a button or a right-click event. It provides a convenient and context-sensitive way to present options relevant to a specific element or area within

Avatar component is a versatile image element designed for representing users or entities. It provides a visually appealing way to display user profiles, ensuring a personalized and engaging experience. In case an image is unavailable, the Avatar includes

A password input component allows users to securely enter their passwords by masking the characters they type. It often includes features like password visibility toggles and strength indicators for enhanced user experience.

Radio Group component is a set of checkable buttons, commonly known as radio buttons, where no more than one button can be checked at a time. It provides a simple and intuitive way to allow users to make a single selection from a group of options. The Rad

Collapsible component is an interactive element that provides the ability to expand or collapse a panel, offering a dynamic and space-efficient way to present content. It enhances user experience by allowing them to control the visibility of content secti

Tooltip component is a popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it. It provides a non-intrusive way to convey additional details, explanations, or context about a specific elem

The File Uploader component enables users to upload files from their device to a specified destination. It typically includes a user interface element like a button or drag-and-drop area for selecting files. Overall, it offers a convenient way for users t

Slider component is an interactive input element where the user can select a value from within a given range. It provides a visual representation of the selectable range with a movable handle, allowing users to slide and choose a specific value. Sliders a

Toggle component is a user-friendly, two-state button that can be either on or off. It provides a visually intuitive way for users to toggle between two states, making it ideal for scenarios where binary choices or switches are required. The Toggle compon

Menubar component is a visually persistent menu commonly found in desktop applications, offering quick access to a consistent set of commands or actions. It enhances the user experience by providing a centralized and easily accessible navigation system, a

Drawer component is a versatile and user-friendly component for React that provides a convenient way to present additional content or options, sliding in from the side of the screen. It is commonly used for navigation menus, settings panels, or any supple

A time picker component allows users to select a specific time through an interactive interface, typically displaying hours and minutes.

aginationComponent is a versatile and lightweight npm package for implementing pagination functionality in web applications. It offers customizable pagination controls and seamless integration with popular frontend frameworks. Simplify navigation through

Hover Card component is designed for sighted users, providing a visually appealing and interactive way to preview content available behind a link. It enhances the user experience by allowing users to hover over a link or trigger element, revealing a card

Carousel component is a dynamic and engaging user interface element built using Embla. It seamlessly incorporates motion and swipe functionality, providing an interactive way to showcase a series of content or images. The Carousel enhances user experience

Elevate your projects with our stunning Loaders component. Designed to seamlessly integrate into your applications, our loaders not only enhance user experience but also add a touch of elegance and style to your loading states.

Sticky Scroll Reveal enhances scroll functionality and captivates user engagement by offering tailored, cross-browser styling for a seamless and visually immersive experience. Crafted to amplify both appearance and behavior within scrollable containers, i

Alert component is designed to prominently display a callout, capturing user attention effectively. Whether conveying important information, warnings, or notifications, the Alert component ensures that critical messages are presented prominently within th

Button component is a fundamental element that displays a button or a component resembling a button. It serves as a key interactive element in your user interface, enabling users to perform actions, submit forms, or navigate through your application. The

The Tree View component displays hierarchical data in a collapsible format, resembling a tree structure. Users navigate through parent-child relationships with visual cues, expanding or collapsing nodes to reveal or hide detail. Used in file explorers or

An autocomplete component suggests possible options as users type, helping them quickly complete their input. It enhances usability by offering relevant matches based on the input field context.

The Input-OTP component serves as a foundational element for form interactions, offering a flexible and intuitive method for capturing user input specifically for one-time passwords (OTPs). It is adept at displaying input fields tailored for OTPs or visua

A date-time picker component enables users to easily select both date and time through an interactive calendar and time input. It simplifies scheduling tasks by providing a consistent and user-friendly interface for entering date-time values.

Sheet component extends the functionality of the Dialog component, providing a way to display additional content that complements the main content of the screen. It is particularly useful for presenting contextual information, settings, or secondary actio

The resizable component introduces a versatile solution for managing panel groups and layouts with accessibility and keyboard support at its core. By incorporating this feature into your application, you're not only empowering users with diverse needs but

The Typewriter effect component animates text, mimicking real-time typing on the screen. It adds interactivity and engagement by revealing characters one by one, reminiscent of traditional typewriters. This dynamic feature injects a modern flair into digi

Instantsearch capabilities into your web application. This component provides a seamless interface for implementing lightning-fast, relevant search functionality with minimal configuration. Enhance your user experience with advanced features such as insta

Aspect Ratio component allows you to display content within a desired ratio, providing control over the proportions of images, videos, or other elements. This ensures a consistent and visually appealing layout, allowing for seamless integration of various

The Stepper component divides content into sequential steps, offering users a structured way to navigate through processes or information. It provides visual indicators, such as numbering or symbols, to denote each step, and allows interactive navigation

Toggle Group component is a collection of two-state buttons that can be toggled on or off. It provides a cohesive set of controls for users to choose between different options within a single group. The Toggle Group component is especially useful when you