HBS Platypus UI/UX Framework

Full-stack framework for building modern, responsive, accessible & feature-rich web applications.

Get Started

Features

Feature Request

Need a new feature? Found a bug? Please create a JIRA ticket and assign it to Rob Silva

Explore Components (163)

HBSAccordion

A responsive, collapsable accordion component that can be used to display content.

In Layout

HBSAddress

Formats and renders an address usings its component parts with the option to link to Google Maps.

In Data/Displaying

HBSAddressLookup

Renders an address lookup input with autocomplete and suggestions. This component leverages the Google Places JavaScript API. Make sure you have a valid Google Maps API key in your environment variables.

In Data/Input

HBSAddToCalendar

Enables users to add events to their calendar. This component is a wrapper around the "Add to Calendar" library

In Productivity

HBSAdvancedSelect

An advanced multi-option select dropdown component with features like checkboxes, filter/search, remote options, etc.

In Data/Input

HBSAIHelper

Generic component that uses OpenAI's GPT-3.5 text prompt to provide a JSON response to a question.

In AI/Input

HBSAlert

A component to display inline alerts.

In Notifications/Inline

HBSAlphanumericalFilter

Renders an alphanumerical filter list

In Data/Search

HBSAnimatedIcon

Displays an animated icon to be used with user notification messages.

In Notifications/Icons

HBSApplicationUpdates

Automatically displays a dialog with a list of application changes since last deployment. Uses commits from the current branch to determine what is new. Add this component to your application layout.

In Notifications/Application

HBSAppVersion

Displays the current version of the app from the package.json file.

In Data/Displaying

HBSAsyncSearch

A search component that fetches data from an API asyncronously (wrapper for react-select/async)

In Data/Search

HBSAsyncTags

A searchable, async, multi-select component with the option to add new entries. A wrapper around react-select/async-creatable.

In Data/Search

HBSAudioPlayer

A responsive, accessible, full-feature audio player.

In Data/Media

HBSAvatar

Displays an avatar of a user with a photo if available. Fallsback to user initials or lastly an icon.

In Data/Displaying

HBSAvatarStack

Displays a stack of avatars

In Data/Displaying

HBSBadge

A badge component to display a label with an icon.

In Gamification/Recognition

HBSBackgroundImage

A responsive background image component with optional overlay and content.

In Layout

HBSBarChart

A responsive bar chart component for visualizing data. Uses @nivo/bar under the hood.

In Charts

HBSBillingCode

An input component for entering a 30-digit department billing code.

In Data/Input

HBSBlankState

A component to display a blank state message.

In Layout

HBSBreadcrumbs

Automatically displays a list of links to navigate between pages or sections using the URL structure.

In Navigation/Global

HBSButton

Custom button component for actions in forms, dialogs, and more with support for icons, multiple sizes, loading states, etc.

In Data/Input

HBSButtonGroup

A button group is a horizontal grouping of buttons. Button groups can contain button elements as well as input elements of type checkbox or radio.

In Data/Input

HBSCalendar

Renders a full calendar that automatically fetches events from an API and displays them in various configurable formats. Refer to /api/events for the expected format of the data. This is a wrapper component around the @fullcalendar/react component.

In Data/Displaying

HBSCalendarChart

A responsive calendar chart component for visualizing data. Uses @nivo/calendar under the hood.

In Charts

HBSCard

The card component that provides a summary and an entry point to additional information

In Layout

HBSCardFlip

A simple card component that flips to reveal additional information.

In Layout

HBSCarousel

The touch-enabled, responsive carousel component for displaying content in modern web browsers and touch devices.

In Layout

HBSCircularProgress

A circular progress component that displays a percentage value.

In Admin

HBSCheckbox

Renders simple checkbox inputs from a static list or an API request.

In Data/Input

HBSClipboard

Enables the user to copy a string to the clipboard through the browser API.

In Productivity

HBSCollapse

Toggle the visibility of content across your application.

In Layout

HBSComparissonTable

Renders a table to visually contrast the features and specifications of multiple products or services side-by-side, allowing users to easily see their key differences and make informed decisions when comparing options; essentially, it's a structured way to highlight the pros and cons of each choice in one place.

In Data/Displaying

HBSColorLegend

Displays a legend of colors and their corresponding labels.

In Data/Displaying

HBSColorPicker

Enables selection of a specific color from a given color palette array

In Data/Input

HBSConfetti

A simple component that displays a confetti animation.

In Miscellaneous/Onboarding

HBSContextMenu

Enables a custom context menu on right-click.

In Layout

HBSCopyright

Displays copyright text.

In Layout

HBSCountdown

A simple inline countdown component that displays the time left until now.

In Notifications/Inline

HBSCounterInput

Input component that allows the user to increment or decrement a value as well as set min, max and step.

In Data/Input

HBSCountryFlag

Renders a 4x3 country flag as an SVG image using an ISO 2-digit country code

In Data/Displaying

HBSCountrySelector

Displays a sorted, filterable list of countries and SVG flags following the ISO 3166-1 alpha-2 convention.

In Data/Input

HBSCronExpressionInput

Input component for editing cron expressions. This component is a wrapper around the react-cron-input component and provides a human-friendly set of inputs for entering or editing CRON expressions.

In Data/Admin

HBSCurrencyInput

A customizable currency input field with masking, local currency symbol, and validation.

In Data/Input

HBSDate

Formats an ISO 8601 date string to a human-readable format.

In Data/Displaying

HBSDateWidget

Renders a date widget with a calendar icon and a formatted date.

In Data/Displaying

HBSDateTimePicker

A wrapper around the react-datetime-picker component.

In Data/Input

HBSDialog

A responsive, reusable dialog component.

In Data/Displaying

HBSDirectory

Displays a directory of users

In Data/Displaying

HBSDrawer

Renders an offcanvas drawer

In Layout

HBSDropdown

Renders a resusable dropdown menu component.

In Layout

HBSDualMultiSelect

A dual multi-select component that allows users to move items between two flat lists.

In Data/Input

HBSEditableInput

Input for editing a value in place.

In Data/Input

HBSEmailer

Sends transactional emails using nodemailer and mailtrap.io. Refer to /api/email/route.js for a sample server-side implementation.

In Notifications/Email

HBSEnvironmentIndicator

Displays the current environment of the application based on checking the hostname against the provided defaults.

In Data/Widgets

HBSExternalLinkIndicator

Indicates that a link will open externally in a new tab.

In Layout

HBSErrorState

A component to display an error state message.

In Layout

HBSFab

Renders a floating action button (FAB) to represent the primary action of a screen or a speed dial menu.

In Navigation/Global

HBSFeedback

A component that allows users to provide feedback on a given application.

In Data/Input

HBSFieldset

A component to semantically wrap up similar fields in a form

In Data/Input

HBSFileBrowser

A file browser component that leverages Chonky

In Data/Displaying

HBSFileSize

Displays the size of a file in human-readable format.

In Data/Displaying

HBSFileUploader

A client-side file uploader component with smart defaults, validation and preview. Refer to /app/api/upload/route.js for a sample server-side implementation.

In Data/Input

HBSFooter

Universal footer for all HBS applications.

In Layout

HBSFormLabel

Displays a label for a form input field. If the field is required, a red asterisk is displayed next to the label with a tooltip stating such.

In Data/Input

HBSFullscreen

A component to toggle full screen mode for its children. Note: it will not work in the Storybook preview because it is loaded from within an iframe.

In Productivity

HBSGauge

Responsive gauge component for visualizing numeric values in a circular scale.

In Data/Admin

HBSGradientBackground

A decorative gradient background component that can be used to enhance the visual appeal of your application. It supports multiple colors and an optional animation.

In Layout

HBSGradientHeadline

A decorative gradient headline component that can be used to enhance the visual appeal of your headings.

In Layout

HBSHelpful

A component that allows users to provide simple feedback on a specific resource, feature or page within a given application. Refer to POST /api/helpful for backend implementation example.

In Data/Input

HBSHTMLSanitizer

A component that sanitizes HTML input to prevent XSS attacks. It uses the DOMParser API to parse the HTML and remove any disallowed tags.

In Data/Displaying

HBSHighlightWrapper

A conditonal wrapping chrome component to highlight other components.

In Layout

HBSIcon

Renders a Font Awesome Pro 6.4.2 icon with custom size, style and stacking options

In Data/Displaying

HBSIconTeaser

Displays a teaser icon with a title and description.

In Layout

HBSIconSelector

Displays a list of icons from the HBS Icon library (FontAwesome) and allows the user to select one.

In Data/Input

HBSIddleAutoLogout

Automatically logouts user after a period of inactivity.

In Data/Admin

HBSIframe

Displays a seamless, fullscreen iframe with a specified URL

In Layout

HBSImageTile

Renders an image tile that can be used as a teaser link

In Layout

HBSInfiniteScrollList

Renders a dynamic list of elements and automaticallt fetches additional items upon user scrolling.

In Data/Displaying

HBSInput

Custom input component with validation, masking and smart defaults.

In Data/Input

HBSJSONEditor

A JSON editor component that allows users to edit JSON data in a tree view. This component is a wrapper around the json-edit-react component.

In Data/Input

HBSJumbotron

A responsive jumbotron component with branding options and configurable call to actions.

In Layout

HBSKeyboardShortcuts

Enables keyboard shortcuts for your application by binding functions to keys and key combos. Leverages Keystroke.js.

In Productivity

HBSLeaderboard

Displays a leaderboard of users with their respective scores.

In Gamification/Progress

HBSLightDarkModeSwitch

A switch to toggle between light and dark mode. Current selection is persisted in local storage.

In Accessibility

HBSLineChart

A responsive stackable line chart component for visualizing data. Uses @nivo/line under the hood.

In Charts

HBSList

Displays a list of items

In Layout

HBSLoading

A full screen component that displaying a loading indicator and disables user interaction.

In Layout

HBSLoginForm

Renders and handles user login, redirect as well and password reset. Mock backend API randomly returns success or failure for demo purposes.

In Data/Input

HBSLogo

Displays the HBS brand as a responsive SVG image.

In Layout

HBSMaintenance

A component to display a maintenance message and an optional expected resolution date. Can be configured to be displayed using environment variables and the built in middleware that will automatically all requests to /maintenance.

In Miscellaneous/Maintenance

HBSMentionInput

A component that allows users to mention other users in a text field.

In Data/Input

HBSModal

A responsive, reusable dialog component.

In Layout

HBSModalDetails

Renders a details of a specific record within a configurable modal. Supports various custom data types and layouts.

In Layout

HBSMultiLineTextTruncator

Truncates long text to a specified number of lines, displays a fading effect and enables a click to show all text functionality.

In Data/Displaying

HBSMultiStepServerResponse

Displays the current status of a complex, multi-step server-side process. Refer to GET /api/students/process for server-side implementation example.

In Data/Displaying

HBSNavbar

Custom responsive, mobile-first navbar component with with customizable styles.

In Navigation/Global

HBSNumber

Providers language-sensitive number formatting. A wrapper around Intl.NumberFormat()

In Data/Displaying

HBSNetworkStatusIndicator

Displays a message when the user is offline. Uses the react-use library. Turn off your network connection to see the message. Place this component above HBSNavigation in your layout.

In Data/Widgets

HBSNotificationDropdownList

Displays list of application notifications from an API. To be used in conjunction with HBSNavbar. See API handler example at /api/notifications/route.js

In Notifications/Application

HBSObfuscate

A component that obfuscates any string passed to it.

In Data/Displaying

HBSObjectDebugger

A debugging component that displays the structure of a JavaScript object in a collapsible tree format.

In Miscellaneous/Debugging

HBSOnboarding

Provides a guided tour of your application. Make sure to include the TourProvider in your layout or parent component.

In Miscellaneous/Onboarding/HBSOnboarding

HBSPageHeader

A responsive page header component.

In Layout

HBSParallax

A decorative parallax component that moves the background image at a different speed than the foreground content.

In Layout

HBSPanel

A panel component that can be collapsed and expanded.

In Layout

HBSPasscodeInput

An input component for handling email passcode confirmation. Enter the correct passcode (1234) to see the success redirect.

In Data/Input

HBSPasswordInput

A password input field with validation, and strength meter and random password generation capabilities.

In Data/Input

HBSPeoplePicker

A search component that fetches user data from an API asyncronously (wrapper for react-select/async). Look at /api/students for sample endpoint.

In Data/Search

HBSPhoneInput

An input component for phone numbers

In Data/Input

HBSPieChart

A responsive pie chart component for visualizing data. Uses @nivo/pie under the hood.

In Charts

HBSPlaceholder

A loading placeholder for your components or pages to indicate something may still be loading.

In Layout

HBSPluralize

A component to pluralize a word based on a given number.

In Data/Displaying

HBSPopover

Renders a popover using Bootstrap's Popover component.

In Data/Displaying

HBSPrintComponent

Enables the printing of a the contents of a container.

In Miscellaneous/Printing

HBSPrintPage

Prints the current page or a specified URL using a hidden iframe.

In Miscellaneous/Printing

HBSProgress

Displays a progress bar.

In Data/Displaying

HBSProgressStack

Displays a horizontal stack of progress bars. The combined sum of the invididual values (percentages) should not never exceed 100(%).

In Data/Displaying

HBSScrollSpy

A component that displays a list of items and their corresponding content in a scrollable container. The content is highlighted as the user scrolls through the list. Note that examples will not work correctly in storybook due to the fact that it is loaded in an iframe.

In Layout

HBSSmartPagination

Renders a smart dynamic pagination component. Returned response must include `metadata: { totalCount, currentPage, pageSize}` at the root. Refer to GET /api/students for backend example response.GET

In Layout

HBSQRCode

Generates a QR code for the given data.

In Data/Displaying

HBSRadio

Renders simple radio buttons from a static list or an API request.

In Data/Input

HBSRotatingLabels

Renders a label that rotates through a list of strings.

In Layout

HBSRoleCodes

Displays a given user role given a database code.

In Data/Displaying

HBSRange

Allows selection of a numeric value between X and Y though a touch-enabled slider.

In Data/Input

HBSSparkline

A simple sparkline component that displays a line or bar chart.

In Data/Displaying

HBSRatingInput

A start rating component

In Data/Input

HBSResizablePanels

Displays resizable horizontal or vertical panels that can be used to create a split screen layout. Uses react-resizable-panels and persists layout in a cookie.

In Layout

HBSResponsiveImage

A responsive, fully-accessible image component with built in smart defaults.

In Data/Displaying

HBSResponsiveMap

Renders a responsive map with markers and popups using Google Maps JavaScript API v3. Make sure you have a valid Google Maps API key in your environment variables.

In Data/Displaying

HBSRichTextEditor

Renders a rich-text editor using the Quill library. The editor is a controlled component, so it requires a value and an onChange handler.

In Data/Input

HBSScrollToTopButton

Provides smooth back-to-top functionality on long pages.

In Layout

HBSSelect

Display static and remote options as a standard <Select/> dropdown.

In Data/Input

HBSSelectModal

Display static and remote options as a custom selection dropdown.

In Data/Input

HBSSidebar

Left-Side Vertical Responsive Navigation

In Navigation/Pages

HBSSidePanelLinks

A component that displays a list of ancillary links in a side panel.

In Navigation/Pages

HBSSignaturePad

A signature pad component that can be used to capture user signatures using HTML5 Canvas.

In Data/Input

HBSSimpleDragDropSorter

A simple Drag & Drop component for sorting flat lists.

In Data/Sorting

HBSStat

A responsive widget component to display statistics.

In Data/Admin

HBSStatefulButton

Displays a button that visually changes its appearance depending on its current state, like 'idle' 'loading', 'success' or 'error', providing users with clear feedback about the button's functionality and what is happening behind the scenes during an interaction; essentially, it dynamically updates its look to reflect its current status to the user

In Data/Input

HBSStepper

Display progress through numbered steps. They may also be used for navigation.

In Navigation/Pages

HBSStreak

Displays a streak of consecutive days a user has performed an action.

In Gamification/Progress

HBSSupport

Displays options for user support for a given application.

In Support

HBSSwitch

Renders a toggleble list of static of dynamic items

In Data/Input

HBSTable

Generates a simple responsive static table.

In Data/Displaying

HBSDataTable

Dynamically generates a table from remote sourced data. Supports sorting, pagination, and multiple data types. Requires the JSON response to be in this format `{ data: [...columnList], metadata: { totalCount, pageCount, currentPage, pageSize} }`. Refer to GET /api/students for backend example response. Refer to 'Process Response Example' if you need to conform the response to this format.

Displays a tag or label with an optional close button. Useful for categorizing or labeling items in your application.

In Data/Displaying

HBSTextarea

Custom textarea component with validation, maximum length, and smart defaults.

In Data/Input

HBSTicker

Displays a horizontally scrolling ticker of items fetched from an API.

In Data/Displaying

HBSTimeline

Displays a list of events in an alternating timeline layout.

In Data/Displaying

HBSToast

Displays a configurable custom toast message.

In Notifications/Application

HBSTooltip

Displays a custom tooltip message.

In Data/Displaying

HBSTrueFalse

Display the state of a boolean value with a fal back for non-boolean values (null, undefined, etc.)

In Data/Displaying

HBSUptimeChecker

Displays operational status of an API endpoint through a periodic client-side call. Includes the current status (up/down), latency, last checked timestamp. Automatic UI alerts in the form of toast messages are triggered whenever API is down.

In Data/Widgets

HBSUserDropdownMenu

A dropdown menu that displays user-specific options and actions.

In Navigation/Global

HBSUserList

Displays a list of users with avatars and actions.

In Data/Displaying

HBSVerticalTextSlider

A vertical text slider that automatically scrolls through a list of items.

In Layout

HBSVideo

Displays a responsive youtube video with a given aspect ratio.

In Data/Displaying

HBSWarnBeforeLeave

A component that warns the user before leaving a page with unsaved changes. Refer to /documentation/learn/forms for a working example.

In Notifications/Forms

HBSWizard

A wizard component that guides the user through a series of steps.

In Layout

HBSAppGallery

Displays the searchable catalog of HBS Applications and allows users to quickly switch between applications. Should be used inside HBSDrawer. See /api/apps for the data structure required.

In Navigation/Enterprise

The Stack

NodeJS
18.17.0

NextJS
14.0.4

React
18.2.0

Bootstrap
5.3.2

SASS
1.6.9

Vercel
CI/CD