{"id":23122546,"url":"https://github.com/folio-org/stripes-components","last_synced_at":"2026-04-14T21:01:15.089Z","repository":{"id":37334169,"uuid":"71479583","full_name":"folio-org/stripes-components","owner":"folio-org","description":"A component library for Stripes","archived":false,"fork":false,"pushed_at":"2026-04-10T20:13:10.000Z","size":34435,"stargazers_count":17,"open_issues_count":17,"forks_count":37,"subscribers_count":27,"default_branch":"main","last_synced_at":"2026-04-10T21:35:13.675Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://dev.folio.org/stripes-components/","language":"JavaScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/folio-org.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2016-10-20T15:55:46.000Z","updated_at":"2026-04-10T19:57:30.000Z","dependencies_parsed_at":"2023-09-22T03:00:46.876Z","dependency_job_id":"e5932a22-0638-4cb6-92fd-a77d258ef754","html_url":"https://github.com/folio-org/stripes-components","commit_stats":null,"previous_names":[],"tags_count":138,"template":false,"template_full_name":null,"purl":"pkg:github/folio-org/stripes-components","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/folio-org%2Fstripes-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/folio-org%2Fstripes-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/folio-org%2Fstripes-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/folio-org%2Fstripes-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/folio-org","download_url":"https://codeload.github.com/folio-org/stripes-components/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/folio-org%2Fstripes-components/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31815080,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-14T18:05:02.291Z","status":"ssl_error","status_checked_at":"2026-04-14T18:05:01.765Z","response_time":153,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-17T07:27:59.566Z","updated_at":"2026-04-14T21:01:15.072Z","avatar_url":"https://github.com/folio-org.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# stripes-components\n\nCopyright (C) 2016-2019 The Open Library Foundation\n\nThis software is distributed under the terms of the Apache License,\nVersion 2.0. See the file \"[LICENSE](LICENSE)\" for more information.\n\n\u003c!-- md2toc -l 2 README.md --\u003e\n- [stripes-components](#stripes-components)\n  - [Introduction](#introduction)\n  - [Component categories](#component-categories)\n  - [Links to documentation of specific components and utilities](#links-to-documentation-of-specific-components-and-utilities)\n  - [Accessibility](#accessibility)\n  - [Patterns](#patterns)\n  - [Testing](#testing)\n  - [FAQ](#faq)\n  - [To be documented](#to-be-documented)\n  - [Additional information](#additional-information)\n\n\n## Introduction\n\nThis is a library of React components and utility functions for use with [the Stripes UI toolkit](https://github.com/folio-org/stripes-core/), part of [the FOLIO project](https://www.folio.org/).\n\n## Storybook\n\nA listing of our components with demonstrations and example usage can be found here:\nhttps://folio-org.github.io/stripes-components\n\n## Component categories\n\nThese are general descriptive categories that indicate the type of use cases that components serve. A component can have multiple categories associated with it.\n\nCategory | Description\n--- | ---\n**structure** | These are components that aid in the general structure/layout of your app's UI. They include generic containers and components that render structurally important HTML tags (`\u003cHeadline\u003e`, for instance.)\n**control** | Components with the control category are form elements and other interactive widgets including `\u003cTextField\u003e`, `\u003cButton\u003e` and `\u003cDropdown\u003e` - additionally, this category includes components that aid the functionality of other control components, such as the way `\u003cDropdownMenu\u003e` is used with `\u003cDropdown\u003e`\n**data-display** | Data display components are used for display of dynamic content. These include `\u003cList\u003e` and `\u003cMultiColumnList\u003e`\n**design** | These components render `\u003cIcon\u003e`s and other prominent visual landmarks.\n**user-feedback** | These components are geared for making the user aware of happenings in the system. They include `\u003cCallout\u003e` and `\u003cSRStatus\u003e`.\n**accessibility** | Components with this category play an important role in developing accessible modules.\n**utility** | These components aid in interaction with the FOLIO system.\n**prefab** | These components are re-useable pre-constructed components that make re-use of other shared components. Useful constructions such as `\u003cAddressFieldGroup\u003e` and `\u003cEditableList\u003e` fall into this category.\n**obsolete** | Component has been replaced by better solution and is intended for removal in future releases.\n\n## Links to documentation of specific components and utilities\n\nThe following components are available in the [lib](lib) directory.\n\nComponent | doc | categories\n--- | --- | ---\n[`\u003cAccordion\u003e`](lib/Accordion) | [doc](lib/Accordion/readme.md) | structure\n[`\u003cAdvancedSearch\u003e`](lib/AdvancedSearch) | [doc](lib/AdvancedSearch/readme.md) | control\n[`\u003cAuditLog\u003e`](lib/AuditLog) | [doc](lib/AuditLog/readme.md) | data-display\n[`\u003cAutoSuggest\u003e`](lib/AutoSuggest) | [doc](lib/AutoSuggest/readme.md) | control\n[`\u003cAvatar\u003e`](lib/Avatar) | [doc](lib/Avatar/readme.md) | data-display\n[`\u003cBadge\u003e`](lib/Badge) | [doc](lib/Badge/readme.md) | data-display, design\n[`\u003cButton\u003e`](lib/Button) | [doc](lib/Button/readme.md) | control\n[`\u003cButtonGroup\u003e`](lib/ButtonGroup) | [doc](lib/ButtonGroup/readme.md) | control\n[`\u003cCallout\u003e`](lib/Callout) | [doc](lib/Callout/readme.md) | user-feedback\n[`\u003cCard\u003e`](lib/Card) | [doc](lib/Card/readme.md) | structure\n[`\u003cCheckbox\u003e`](lib/Checkbox) | [doc](lib/Checkbox/readme.md) | control\n[`\u003cCol\u003e`](lib/LayoutGrid) | [doc](lib/LayoutGrid/readme.md) | structure\n[`\u003cCommander\u003e`](lib/Commander) | [doc](lib/Commander/README.md) | utility\n[`\u003cConfirmationModal\u003e`](lib/ConfirmationModal) | [doc](lib/ConfirmationModal/readme.md) | control, prefab\n[`\u003cConflictDetectionBanner\u003e`](lib/ConflictDetectionBanner) | [doc](lib/ConflictDetectionBanner/readme.md) | user-feedback\n[`\u003cCountrySelection\u003e`](lib/CountrySelection) |  | control\n[`\u003cCurrencySelect\u003e`](lib/CountrySelection) |  | control\n[`\u003cDatepicker\u003e`](lib/Datepicker) | [doc](lib/Datepicker/readme.md) | control\n[`\u003cDateRangeWrapper\u003e`](lib/DateRangeWrapper) | [doc](lib/DateRangeWrapper/readme.md) | control\n[`\u003cDropdown\u003e`](lib/Dropdown) | [doc](lib/Dropdown/readme.md) | control\n[`\u003cDropdownButton\u003e`](lib/DropdownButton) | [doc](lib/DropdownButton/readme.md) | control\n[`\u003cDropdownMenu\u003e`](lib/DropdownMenu) | | control\n[`\u003cEditableList\u003e`](https://github.com/folio-org/stripes-smart-components/tree/master/lib/EditableList) | [doc](https://github.com/folio-org/stripes-smart-components/blob/master/lib/EditableList/readme.md) | control, prefab\n[`\u003cEditor\u003e`](lib/Editor) | [doc](lib/Editor/readme.md) | control\n[`\u003cEmptyMessage\u003e`](lib/EmptyMessage) | [doc](lib/EmptyMessage/readme.md) | structure\n[`\u003cErrorBoundary\u003e`](lib/ErrorBoundary) | [doc](lib/ErrorBoundary/readme.md) | user-feedback\n[`\u003cErrorModal\u003e`](lib/ErrorModal) | [doc](lib/ErrorModal/readme.md) | user-feedback\n[`\u003cExportCsv\u003e`](lib/ExportCsv) | [doc](lib/ExportCsv/readme.md) | control\n[`\u003cFilterControlGroup\u003e`](lib/FilterControlGroup) | | control\n[`\u003cFilterGroups\u003e`](lib/FilterGroups) | [doc](lib/FilterGroups/readme.md) | control\n[`\u003cFilterPaneSearch\u003e`](lib/FilterPaneSearch) | [doc](lib/FilterPaneSearch/readme.md) | obsolete\n[`\u003cFocusLink\u003e`](lib/FocusLink) | [doc](lib/FocusLink/readme.md) | accessibility\n[`\u003cFormattedDate\u003e`](lib/FormattedDate) | | data-display\n[`\u003cFormattedTime\u003e`](lib/FormattedTime) | | data-display\n[`\u003cFormattedUTCDate\u003e`](lib/FormattedUTCDate) | [doc](lib/FormattedUTCDate/readme.md) | data-display\n[`\u003cFormField\u003e`](lib/FormField) | [doc](lib/FormField/readme.md) | control\n[`\u003cFormFieldArray\u003e`](lib/FormFieldArray) | | control\n[`\u003cHeadline\u003e`](lib/Headline) | [doc](lib/Headline/readme.md) | structure\n[`\u003cHighlighter\u003e`](lib/Highlighter) | [doc](lib/Highlighter/readme.md) | utility\n[`\u003cHotKeys\u003e`](lib/HotKeys) | [doc](lib/HotKeys/readme.md) | utility\n[`\u003cIcon\u003e`](lib/Icon) | [doc](lib/Icon/readme.md) | design\n[`\u003cIconButton\u003e`](lib/IconButton) | [doc](lib/IconButton/readme.md) | control\n[`\u003cInfoPopover\u003e`](lib/InfoPopover) | [doc](lib/InfoPopover/readme.md) | control, prefab\n[`\u003cKeyboardShortcutsModal\u003e`](lib/KeyboardShortcutsModal) | [doc](lib/KeyboardShortcutsModal/readme.md) | utility\n[`\u003cKeyValue\u003e`](lib/KeyValue) | [doc](lib/KeyValue/readme.md) | data-display\n[`\u003cLabel\u003e`](lib/Label) | [doc](lib/Label/readme.md) | control\n[`\u003cLayer\u003e`](lib/Layer) | [doc](lib/Layer/readme.md) | structure\n[`\u003cLayout\u003e`](lib/Layout) | [doc](lib/Layout/readme.md) | structure\n[`\u003cLayoutBox\u003e`](lib/LayoutBox) | | structure\n[`\u003cLayoutGrid\u003e`](lib/LayoutGrid) | [doc](lib/LayoutGrid/readme.md) | structure\n[`\u003cLayoutHeader\u003e`](lib/LayoutHeader) | [doc](lib/LayoutHeader/readme.md) | structure\n[`\u003cList\u003e`](lib/List) | [doc](lib/List/readme.md) | data-display\n[`\u003cLoading\u003e`](lib/Loading) | [doc](lib/Loading/readme.md) | design\n[`\u003cLoadingPane\u003e`](lib/Loading) | [doc](lib/Loading/readme.md) | design\n[`\u003cLoadingView\u003e`](lib/Loading) | [doc](lib/Loading/readme.md) | design\n[`\u003cMenuItem\u003e`](lib/MenuItem) | [doc](lib/MenuItem/readme.md) | control\n[`\u003cMenuSection\u003e`](lib/MenuSection) | [doc](lib/MenuSection/readme.md) | control\n[`\u003cMessageBanner\u003e`](lib/MessageBanner) | [doc](lib/MessageBanner/readme.md) | user-feedback\n[`\u003cMetaSection\u003e`](lib/MetaSection) | [doc](lib/MetaSection/readme.md) | data-display\n[`\u003cModal\u003e`](lib/Modal) | [doc](lib/Modal/readme.md) | container\n[`\u003cModalFooter\u003e`](lib/ModalFooter) | [doc](lib/ModalFooter/readme.md) | container\n[`\u003cMultiColumnList\u003e`](lib/MultiColumnList) | [doc](lib/MultiColumnList/readme.md) | data-display\n[`\u003cMultiSelection\u003e`](lib/MultiSelection) | [doc](lib/MultiSelection/readme.md) | control\n[`\u003cNavList\u003e`](lib/NavList) | [doc](lib/NavList/readme.md) | control\n[`\u003cNavListItem\u003e`](lib/NavListItem) | | control\n[`\u003cNavListSection\u003e`](lib/NavListSection) | | control\n[`\u003cNoValue\u003e`](lib/NoValue) | [doc](lib/NoValue/readme.md) | accessibility\n[`\u003cPane\u003e`](lib/Pane) | [doc](lib/Pane/readme.md) | structure\n[`\u003cPaneBackLink\u003e`](lib/PaneBackLink) | [doc](lib/PaneBackLink/readme.md) | control\n[`\u003cPaneCloseLink\u003e`](lib/PaneCloseLink) | [doc](lib/PaneCloseLink/readme.md) | control\n[`\u003cPaneFooter\u003e`](lib/PaneFooter) | [doc](lib/PaneFooter/readme.md) | structure\n[`\u003cPaneHeader\u003e`](lib/PaneHeader) | [doc](lib/PaneHeader/readme.md) | structure\n[`\u003cPaneHeaderIconButton\u003e`](lib/PaneHeaderIconButton) | [doc](lib/PaneHeaderIconButton/readme.md) | control\n[`\u003cPaneMenu\u003e`](lib/PaneMenu) | [doc](lib/PaneMenu/readme.md) | control\n[`\u003cPaneset\u003e`](lib/Paneset) | [doc](lib/Paneset/readme.md) | structure\n[`\u003cPaneSubheader\u003e`](lib/PaneSubheader) | [doc](lib/PaneSubheader/readme.md) | structure\n[`\u003cPasswordStrength\u003e`](lib/PasswordStrength) | [doc](lib/PasswordStrength/readme.md) | data-display\n[`\u003cPluggable\u003e`](https://github.com/folio-org/stripes-core/blob/master/src/Pluggable.js) | | utility\n[`\u003cPopover\u003e`](lib/Popover) | [doc](lib/Popover/readme.md) | control\n[`\u003cPopper\u003e`](lib/Popper) | [doc](lib/Popper/readme.md) | control\n[`\u003cRadioButton\u003e`](lib/RadioButton) | [doc](lib/RadioButton/readme.md) | control\n[`\u003cRadioButtonGroup\u003e`](lib/RadioButtonGroup) | [doc](lib/RadioButtonGroup/readme.md) | control\n[`\u003cRepeatableField\u003e`](lib/RepeatableField) | [doc](lib/RepeatableField/readme.md) | control, prefab\n[`\u003cRow\u003e`](lib/LayoutGrid) | [doc](lib/LayoutGrid/readme.md) | structure\n[`\u003cSearchField\u003e`](lib/SearchField) | [doc](lib/SearchField/readme.md) | control, prefab\n[`\u003cSelect\u003e`](lib/Select) | [doc](lib/Select/readme.md) | control\n[`\u003cSelection\u003e`](lib/Selection) | [doc](lib/Selection/readme.md) | control\n[`\u003cSettings\u003e`](https://github.com/folio-org/stripes-smart-components/tree/master/lib/Settings) | [doc](https://github.com/folio-org/stripes-smart-components/blob/master/lib/Settings/readme.md) | prefab\n[`\u003cSpinner\u003e`](lib/Spinner) | | design\n[`\u003cSRStatus\u003e`](lib/SRStatus) | [doc](lib/SRStatus/readme.md) | accessibility, user-feedback\n[`\u003cTextArea\u003e`](lib/TextArea) | | control\n[`\u003cTextField\u003e`](lib/TextField) | [doc](lib/TextField/readme.md) | control\n[`\u003cTextLink\u003e`](lib/TextLink) | [doc](lib/TextLink/readme.md) | control\n[`\u003cTimepicker\u003e`](lib/Timepicker) | [doc](lib/Timepicker/readme.md) | control\n[`\u003cTooltip\u003e`](lib/Tooltip) | [doc](lib/Tooltip/readme.md) | data-display\n\nThere are also various [utility _functions_](util) (as opposed to React components), which are [documented separately](util/README.md).\n\n## Accessibility\n* [Accessibility overview](guides/accessibility/AboutAccessibility.stories.mdx) - general overview of some utilities that stripes-components provides.\n* [Accessibility for developers](guides/accessibility/AccessibilityDevPrimer.stories.mdx) - dev-specific primer for accessibility. More direct code/component reference - a great intro for those who are unfamiliar to accessibility.\n\n## Patterns\nUseful recipes for UI patterns appearing in FOLIO modules.\n\n* [Show/Hide Columns in MCL](guides/patterns/ColumnSelector.stories.mdx) -- Give users the ability to select only the data they need to see.\n* [Accessible Routing](guides/patterns/AccessibleRouting.stories.mdx) -- Detail the approaches to implementing accessible focus management.\n\n## Working with dates/times in UI-Modules\n\nWe provide a handful of components and utilities for date/time functionality.\n\n* **Datepicker, Timepicker, DateRangeWrapper components** - UI-widgets for accepting date/time input.\n* **FormattedDate, FormattedUTCDate, FormattedTime** - Cross-browser convenience components for displaying localized representations of system ISO8601 timestamps.\n* [dateTimeUtils](util/DateUtils_readme.md) - A handful of utility functions for working with date/time code in application logic.\n* **Hooks**\n  * useFormatDate - presentational date-formatting.\n  * useFormatTime - presentational time-formatting.\n  * useDynamicLocale - loading DayJS locale information within functional components (also available in component form, via `DynamicLocaleRenderer`).\n\n## Testing\nStripes Components' tests are automated browser tests powered by\n[Karma](http://karma-runner.github.io) and written using\n[Mocha](https://mochajs.org/), [Chai](https://github.com/chaijs/chai),\nand [BigTest](https://bigtestjs.io/).\n\nComponent tests can be run by navigating to your `stripes-components`\nfolder and running\n\n```\nyarn test\n```\n\nThis will spin up Karma via\n[`stripes-cli`](https://github.com/folio-org/stripes-cli) and run all\ntests locally in the Chrome browser.\n\nSee our [testing documentation](guides/Testing.stories.mdx) for more information\non writing tests.\n\n## FAQ\nCheck our [Frequently asked questions for Module developers page](FAQ.md)\n\n## To be documented\n\nXXX Say something about\n[`sharedStyles`](lib/sharedStyles/),\n[`global.css`](lib/global.css)\nand\n[`variables.css`](lib/variables.css).\n\n\n## Additional information\n\nSome related documents:\n\n* [Guide to UI Module Layout Components](guides/UIModuleLayout.stories.mdx)\n* [CSS for stripes-components development](guides/CSSinStripes.stories.mdx)\n* [Change-log](CHANGELOG.md)\n\nSee project [STCOM](https://issues.folio.org/browse/STCOM) (STripes COMponents)\nat the [FOLIO issue tracker](https://dev.folio.org/guidelines/issue-tracker/).\n\nOther FOLIO Developer documentation is at [dev.folio.org](https://dev.folio.org/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffolio-org%2Fstripes-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffolio-org%2Fstripes-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffolio-org%2Fstripes-components/lists"}