App Gallery
HBS Logo

HBS Logo

HBS Platypus UI/UX Framework

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

 
 
Get Started
 
 
Features
 
 
Feature Request
Jira

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

 

Explore Components (162)

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
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.
In Data/Displaying
HBSTabs
Renders dynamic tabs
In Layout
HBSTag
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
© 2025 President & Fellows of Harvard College
Mock API is up [0ms]
Version 0.2.4