Table of Contents
hide
The default Filestack Picker is built to be functional out of the box. Your application, however, has its own design language. A file uploader should match that design, not feel like a disconnected third-party component.
The picker is built to be customized. This guide walks through how to style it with CSS to match your UI. A comprehensive set of classes is available to give you control over the picker’s appearance. To ensure your styles are applied, prefix your selectors with .fsp-picker. This raises the specificity enough to override the default styles correctly.
Key Takeaways
- The file picker is fully stylable with CSS so it matches your app’s UI.
- To override default styles, just prefix your CSS selectors with
.fsp-picker. - You can build any theme, from a simple dark mode to complex branded color schemes.
- Styling isn’t limited to colors; you can add your own CSS transitions and animations.
- The documentation lists every CSS class for styling all parts of the picker.
Here are a few themes to demonstrate what is possible.
Dark Theme
A common customization is a dark theme. This requires changing the primary background to a dark color and the text to a light one. The main classes to target for this are .fsp-modal for the main container, .fsp-header for the top bar, and .fsp-grid__cell for individual file items.
Dark Theme Picker View
Dark Theme CSS
/* Dark theme customization from css.md */
.fsp-picker {
background: rgba(0, 0, 0, 0.8) !important;
}
.fsp-picker .fsp-modal,
.fsp-picker .fsp-modal-backdrop,
.fsp-picker .fsp-modal-dialog,
.fsp-picker .fsp-modal-content,
.fsp-picker .fsp-content,
.fsp-picker .fsp-panel,
.fsp-picker .fsp-page,
.fsp-picker .fsp-page-inner,
.fsp-picker .fsp-wrapper,
.fsp-picker .fsp-row,
.fsp-picker .fsp-col,
.fsp-picker .fsp-summary__action {
background-color: #2c3e50 !important;
color: white !important;
}
.fsp-picker .fsp-header,
.fsp-picker .fsp-navbar,t
.fsp-picker .fsp-nav,
.fsp-picker .fsp-nav-tabs,
.fsp-picker .fsp-toolbar,
.fsp-picker .fsp-menu,
.fsp-picker .fsp-breadcrumb,
.fsp-picker .fsp-modal-header,
.fsp-picker .fsp-panel-title,
.fsp-picker .fsp-title,
.fsp-picker .fsp-lbl {
background-color: #34495e !important;
color: white !important;
border-bottom: 1px solid #4a5f7a !important;
}
.fsp-picker .fsp-body,
.fsp-picker .fsp-panel-body,
.fsp-picker .fsp-gallery,
.fsp-picker .fsp-list,
.fsp-picker .fsp-list-wrapper,
.fsp-picker .fsp-tab-panel,
.fsp-picker .fsp-file-selector,
.fsp-picker .fsp-picker__fileinput,
.fsp-picker .fsp-picker__sources,
.fsp-picker .fsp-picker__services,
.fsp-picker .fsp-picker__dragdrop,
.fsp-picker .fsp-picker__browse {
background-color: #34495e !important;
color: white !important;
}
.fsp-picker .fsp-dropzone,
.fsp-picker .fsp-drop-area {
background-color: #34495e !important;
border: 2px dashed #4a5f7a !important;
color: white !important;
}
.fsp-picker .fsp-dropzone:hover,
.fsp-picker .fsp-drop-area:hover {
background-color: #4a5f7a !important;
}
.fsp-picker .fsp-drop-area__title {
color: white !important;
font-size: 18px;
font-weight: bold;
}
.fsp-picker .fsp-drop-area__subtitle {
color: #bfbfbf !important;
font-size: 14px;
}
.fsp-picker .fsp-grid {
background-color: #34495e !important;
padding: 20px;
}
.fsp-picker .fsp-grid__cell {
background-color: #4a5f7a !important;
color: white !important;
border: 1px solid #5a6f8a !important;
border-radius: 8px;
transition: all 0.3s ease;
}
.fsp-picker .fsp-grid__cell:hover {
background-color: #5a6f8a !important;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.fsp-picker .fsp-button {
background-color: #34495e !important;
color: white !important;
border: 1px solid #4a5f7a !important;
border-radius: 6px;
padding: 8px 16px;
transition: all 0.3s ease;
}
.fsp-picker .fsp-button:hover {
background-color: #4a5f7a !important;
}
.fsp-picker .fsp-button--primary {
background-color: #3498db !important;
color: white !important;
border: none !important;
}
.fsp-picker .fsp-button--primary:hover {
background-color: #2980b9 !important;
}
.fsp-picker .fsp-button--cancel {
background-color: #95a5a6 !important;
color: white !important;
border: none !important;
}
.fsp-picker .fsp-button--cancel:hover {
background-color: #7f8c8d !important;
}
/* Left sidebar/sources panel */
.fsp-picker .fsp-source-list {
background-color: #2c3e50 !important;
border-right: 1px solid #4a5f7a !important;
}
.fsp-picker .fsp-source-item {
background-color: #2c3e50 !important;
color: white !important;
border-bottom: 1px solid #4a5f7a !important;
}
.fsp-picker .fsp-source-item:hover,
.fsp-picker .fsp-source-item.fsp-active {
background-color: #34495e !important;
}
.fsp-picker .fsp-source-list .fsp-source-item__icon {
color: white !important;
}
/* My Device section */
.fsp-picker .fsp-source-list__item {
background-color: #2c3e50 !important;
color: white !important;
border-bottom: 1px solid #4a5f7a !important;
}
.fsp-picker .fsp-source-list__item:hover,
.fsp-picker .fsp-source-list__item--active {
background-color: #34495e !important;
}
.fsp-picker .fsp-source-list__label {
color: white !important;
}
Dracula Theme
The Dracula color palette is common in code editors and can be applied to the picker for a consistent developer-facing experience. This theme uses Dracula’s dark background (#282a36) for the modal, with its signature purple (#bd93f9) and green (#50fa7b) as accents for interactive elements like buttons (.fsp-button--primary) and borders. The source list on the left (.fsp-source-list) is also styled to complete the look.
Dracula Theme Picker View
Dracula Theme Folder View
Dracula Theme CSS
/* Dracula theme customization */
.fsp-picker {
background: rgba(0, 0, 0, 0.8) !important;
}
.fsp-picker .fsp-modal,
.fsp-picker .fsp-modal-backdrop,
.fsp-picker .fsp-modal-dialog,
.fsp-picker .fsp-modal-content,
.fsp-picker .fsp-content,
.fsp-picker .fsp-panel,
.fsp-picker .fsp-page,
.fsp-picker .fsp-page-inner,
.fsp-picker .fsp-wrapper,
.fsp-picker .fsp-row,
.fsp-picker .fsp-col,
.fsp-picker .fsp-summary__action {
background-color: #282a36 !important;
color: #f8f8f2 !important;
}
.fsp-picker .fsp-header,
.fsp-picker .fsp-navbar,
.fsp-picker .fsp-nav,
.fsp-picker .fsp-nav-tabs,
.fsp-picker .fsp-toolbar,
.fsp-picker .fsp-menu,
.fsp-picker .fsp-breadcrumb,
.fsp-picker .fsp-modal-header,
.fsp-picker .fsp-panel-title,
.fsp-picker .fsp-title,
.fsp-picker .fsp-lbl {
background-color: #44475a !important;
color: #f8f8f2 !important;
border-bottom: 1px solid #6272a4 !important;
}
.fsp-picker .fsp-body,
.fsp-picker .fsp-panel-body,
.fsp-picker .fsp-gallery,
.fsp-picker .fsp-list,
.fsp-picker .fsp-list-wrapper,
.fsp-picker .fsp-tab-panel,
.fsp-picker .fsp-file-selector,
.fsp-picker .fsp-picker__fileinput,
.fsp-picker .fsp-picker__sources,
.fsp-picker .fsp-picker__services,
.fsp-picker .fsp-picker__dragdrop,
.fsp-picker .fsp-picker__browse {
background-color: #44475a !important;
color: #f8f8f2 !important;
}
.fsp-picker .fsp-dropzone,
.fsp-picker .fsp-drop-area {
background-color: #44475a !important;
border: 2px dashed #6272a4 !important;
color: #f8f8f2 !important;
}
.fsp-picker .fsp-dropzone:hover,
.fsp-picker .fsp-drop-area:hover {
background-color: #6272a4 !important;
}
.fsp-picker .fsp-drop-area__title {
color: #f8f8f2 !important;
font-size: 18px;
font-weight: bold;
}
.fsp-picker .fsp-drop-area__subtitle {
color: #bd93f9 !important;
font-size: 14px;
}
.fsp-picker .fsp-grid {
background-color: #44475a !important;
padding: 20px;
}
.fsp-picker .fsp-grid__cell {
background-color: #6272a4 !important;
color: #f8f8f2 !important;
border: 1px solid #bd93f9 !important;
border-radius: 8px;
transition: all 0.3s ease;
}
.fsp-picker .fsp-grid__cell:hover {
background-color: #bd93f9 !important;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.fsp-picker .fsp-button {
background-color: #44475a !important;
color: #f8f8f2 !important;
border: 1px solid #6272a4 !important;
border-radius: 6px;
padding: 8px 16px;
transition: all 0.3s ease;
}
.fsp-picker .fsp-button:hover {
background-color: #6272a4 !important;
}
.fsp-picker .fsp-button--primary {
background-color: #50fa7b !important;
color: #282a36 !important;
border: none !important;
}
.fsp-picker .fsp-button--primary:hover {
background-color: #5af78e !important;
}
/* Folder selection button */
.fsp-picker .fsp-button--folder {
background-color: #50fa7b !important;
color: #282a36 !important;
border: none !important;
}
.fsp-picker .fsp-button--folder:hover {
background-color: #5af78e !important;
}
.fsp-picker .fsp-button--cancel {
background-color: #6272a4 !important;
color: #f8f8f2 !important;
border: none !important;
}
.fsp-picker .fsp-button--cancel:hover {
background-color: #8be9fd !important;
}
/* Left sidebar/sources panel */
.fsp-picker .fsp-source-list {
background-color: #282a36 !important;
border-right: 1px solid #6272a4 !important;
}
.fsp-picker .fsp-source-item {
background-color: #282a36 !important;
color: #f8f8f2 !important;
border-bottom: none !important;
}
.fsp-picker .fsp-source-item:hover,
.fsp-picker .fsp-source-item.fsp-active {
background-color: #44475a !important;
}
.fsp-picker .fsp-source-list .fsp-source-item__icon {
color: #f8f8f2 !important;
}
/* My Device section */
.fsp-picker .fsp-source-list__item {
background-color: #282a36 !important;
color: #f8f8f2 !important;
border-bottom: none !important;
}
.fsp-picker .fsp-button fsp-button--cancel {
text-align: center !important;
background-color: red !important;
}
.fsp-picker .fsp-source-list__item:hover,
.fsp-picker .fsp-source-list__item--active {
background-color: #44475a !important;
}
.fsp-picker .fsp-source-list__label {
color: #f8f8f2 !important;
}
/* Accordion styling */
.fsp-content .accordion-item .accordion-header,
.fsp-summary__item.accordion-header {
background-color: #44475a !important;
color: #f8f8f2 !important;
padding: 12px;
cursor: pointer;
}
.fsp-content .accordion-item .accordion-content {
background-color: #44475a !important;
color: #f8f8f2 !important;
border: 1px solid #6272a4 !important;
}
/* Center button text */
.fsp-picker .fsp-button.fsp-button--primary.fsp-button-upload,
.fsp-picker .fsp-button.fsp-button--cancel {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
}
/* Footer styling */
.fsp-picker .fsp-footer,
.fsp-picker .fsp-footer--appeared {
background-color: #44475a !important;
color: #f8f8f2 !important;
}
.fsp-picker .fsp-footer__nav {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
background-color: #44475a !important;
padding: 12px;
}
.fsp-picker .fsp-footer__nav--left,
.fsp-picker .fsp-footer__nav--right {
flex: 1;
}
.fsp-picker .fsp-footer__nav--right {
text-align: right;
}
.fsp-picker .fsp-footer__nav--right > div {
display: inline-flex;
gap: 8px;
}
/* Select Folders button */
.fsp-picker .fsp-drop-area__button {
background-color: #50fa7b !important;
color: #282a36 !important;
border: none !important;
padding: 8px 16px;
border-radius: 6px;
font-weight: bold;
}
.fsp-picker .fsp-drop-area__button:hover {
background-color: #5af78e !important;
}
Jellybean Theme
This high-contrast dark theme uses a base background of #121212 for the main modal (.fsp-modal), with slightly lighter panels and headers set to #1c1c1c. Key actions are highlighted with a muted green (#99ad6a) for the primary button (.fsp-button--primary) and a calm blue (#8197bf) for borders and cancel buttons, creating a focused and readable interface.
Jellybean Picker View
Jellybean Folder View
Jellybean CSS
/* Jellybeans theme customization */
.fsp-picker {
background: rgba(0, 0, 0, 0.8) !important;
}
.fsp-picker .fsp-modal,
.fsp-picker .fsp-modal-backdrop,
.fsp-picker .fsp-modal-dialog,
.fsp-picker .fsp-modal-content,
.fsp-picker .fsp-content,
.fsp-picker .fsp-panel,
.fsp-picker .fsp-page,
.fsp-picker .fsp-page-inner,
.fsp-picker .fsp-wrapper,
.fsp-picker .fsp-row,
.fsp-picker .fsp-col,
.fsp-picker .fsp-summary__action {
background-color: #121212 !important;
color: #e8e8d3 !important;
}
.fsp-picker .fsp-header,
.fsp-picker .fsp-navbar,
.fsp-picker .fsp-nav,
.fsp-picker .fsp-nav-tabs,
.fsp-picker .fsp-toolbar,
.fsp-picker .fsp-menu,
.fsp-picker .fsp-breadcrumb,
.fsp-picker .fsp-modal-header,
.fsp-picker .fsp-panel-title,
.fsp-picker .fsp-title,
.fsp-picker .fsp-lbl {
background-color: #1c1c1c !important;
color: #e8e8d3 !important;
border-bottom: 1px solid #8197bf !important;
}
.fsp-picker .fsp-body,
.fsp-picker .fsp-panel-body,
.fsp-picker .fsp-gallery,
.fsp-picker .fsp-list,
.fsp-picker .fsp-list-wrapper,
.fsp-picker .fsp-tab-panel,
.fsp-picker .fsp-file-selector,
.fsp-picker .fsp-picker__fileinput,
.fsp-picker .fsp-picker__sources,
.fsp-picker .fsp-picker__services,
.fsp-picker .fsp-picker__dragdrop,
.fsp-picker .fsp-picker__browse {
background-color: #1c1c1c !important;
color: #e8e8d3 !important;
}
.fsp-picker .fsp-dropzone,
.fsp-picker .fsp-drop-area {
background-color: #1c1c1c !important;
border: 2px dashed #8197bf !important;
color: #e8e8d3 !important;
}
.fsp-picker .fsp-dropzone:hover,
.fsp-picker .fsp-drop-area:hover {
background-color: #2a2a2a !important;
}
.fsp-picker .fsp-drop-area__title {
color: #e8e8d3 !important;
font-size: 18px;
font-weight: bold;
}
.fsp-picker .fsp-drop-area__subtitle {
color: #8fbfdc !important;
font-size: 14px;
}
.fsp-picker .fsp-grid {
background-color: #1c1c1c !important;
padding: 20px;
}
.fsp-picker .fsp-grid__cell {
background-color: #2a2a2a !important;
color: #e8e8d3 !important;
border: 1px solid #8197bf !important;
border-radius: 8px;
transition: all 0.3s ease;
}
.fsp-picker .fsp-grid__cell:hover {
background-color: #8197bf !important;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.fsp-picker .fsp-button {
background-color: #1c1c1c !important;
color: #e8e8d3 !important;
border: 1px solid #8197bf !important;
border-radius: 6px;
padding: 8px 16px;
transition: all 0.3s ease;
}
.fsp-picker .fsp-button:hover {
background-color: #2a2a2a !important;
}
.fsp-picker .fsp-button--primary {
background-color: #99ad6a !important;
color: #121212 !important;
border: none !important;
}
.fsp-picker .fsp-button--primary:hover {
background-color: #a6b97b !important;
}
/* Folder selection button */
.fsp-picker .fsp-button--folder {
background-color: #99ad6a !important;
color: #121212 !important;
border: none !important;
}
.fsp-picker .fsp-button--folder:hover {
background-color: #a6b97b !important;
}
.fsp-picker .fsp-button--cancel {
background-color: #8197bf !important;
color: #121212 !important;
border: none !important;
}
.fsp-picker .fsp-button--cancel:hover {
background-color: #8fbfdc !important;
}
/* Left sidebar/sources panel */
.fsp-picker .fsp-source-list {
background-color: #121212 !important;
border-right: 1px solid #8197bf !important;
}
.fsp-picker .fsp-source-item {
background-color: #121212 !important;
color: #e8e8d3 !important;
border-bottom: none !important;
}
.fsp-picker .fsp-source-item:hover,
.fsp-picker .fsp-source-item.fsp-active {
background-color: #1c1c1c !important;
}
.fsp-picker .fsp-source-list .fsp-source-item__icon {
color: #e8e8d3 !important;
}
/* My Device section */
.fsp-picker .fsp-source-list__item {
background-color: #121212 !important;
color: #e8e8d3 !important;
border-bottom: none !important;
}
.fsp-picker .fsp-button fsp-button--cancel{
text-align: center !important;
background-color: red !important;
}
.fsp-picker .fsp-source-list__item:hover,
.fsp-picker .fsp-source-list__item--active {
background-color: #1c1c1c !important;
}
.fsp-picker .fsp-source-list__label {
color: #e8e8d3 !important;
}
/* Accordion styling */
.fsp-content .accordion-item .accordion-header,
.fsp-summary__item.accordion-header {
background-color: #1c1c1c !important;
color: #e8e8d3 !important;
border-bottom: 1px solid #8197bf !important;
padding: 12px;
cursor: pointer;
}
.fsp-content .accordion-item .accordion-content {
background-color: #121212 !important;
color: #e8e8d3 !important;
border: 1px solid #8197bf !important;
}
/* Center button text */
.fsp-picker .fsp-button.fsp-button--primary.fsp-button-upload,
.fsp-picker .fsp-button.fsp-button--cancel {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
}
/* Footer styling */
.fsp-picker .fsp-footer,
.fsp-picker .fsp-footer--appeared {
background-color: #1c1c1c !important;
color: #e8e8d3 !important;
border-top: 1px solid #8197bf !important;
}
.fsp-picker .fsp-footer__nav {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
background-color: #1c1c1c !important;
padding: 12px;
}
.fsp-picker .fsp-footer__nav--left,
.fsp-picker .fsp-footer__nav--right {
flex: 1;
}
.fsp-picker .fsp-footer__nav--right {
text-align: right;
}
.fsp-picker .fsp-footer__nav--right > div {
display: inline-flex;
gap: 8px;
}
/* Select Folders button */
.fsp-picker .fsp-drop-area__button {
background-color: #99ad6a !important;
color: #121212 !important;
border: none !important;
padding: 8px 16px;
border-radius: 6px;
font-weight: bold;
}
.fsp-picker .fsp-drop-area__button:hover {
background-color: #a6b97b !important;
}
Ayu Light Theme
For a clean, minimalist aesthetic, this theme uses a light off-white (#fafafa) for the main background with pure white (#ffffff) content areas. The design uses a palette of reserved colors for actions, with a prominent orange (#ff9940) for cancel buttons and the “Select Folders” button (.fsp-drop-area__button), and a calm blue (#55b4d4) for primary upload actions.
Ayu Light Picker
Ayu Light Folder View
Ayu Light CSS
/* Ayu Light theme customization */
/* Picker container background */
.fsp-picker {
background: rgba(255, 255, 255, 0.9) !important;
}
/* General modal and content backgrounds */
.fsp-picker .fsp-modal,
.fsp-picker .fsp-modal-backdrop,
.fsp-picker .fsp-modal-dialog,
.fsp-picker .fsp-modal-content,
.fsp-picker .fsp-content,
.fsp-picker .fsp-panel,
.fsp-picker .fsp-page,
.fsp-picker .fsp-page-inner,
.fsp-picker .fsp-wrapper,
.fsp-picker .fsp-row,
.fsp-picker .fsp-col,
.fsp-picker .fsp-summary__action {
background-color: #fafafa !important;
color: #575f66 !important;
}
/* Headers, navigation, and titles */
.fsp-picker .fsp-header,
.fsp-picker .fsp-navbar,
.fsp-picker .fsp-nav,
.fsp-picker .fsp-nav-tabs,
.fsp-picker .fsp-toolbar,
.fsp-picker .fsp-menu,
.fsp-picker .fsp-breadcrumb,
.fsp-picker .fsp-modal-header,
.fsp-picker .fsp-panel-title,
.fsp-picker .fsp-title,
.fsp-picker .fsp-lbl {
background-color: #f3f4f5 !important;
color: #575f66 !important;
border-bottom: 1px solid #e6e6e6 !important;
}
/* Main body, galleries, and file selectors */
.fsp-picker .fsp-body,
.fsp-picker .fsp-panel-body,
.fsp-picker .fsp-gallery,
.fsp-picker .fsp-list,
.fsp-picker .fsp-list-wrapper,
.fsp-picker .fsp-tab-panel,
.fsp-picker .fsp-file-selector,
.fsp-picker .fsp-picker__fileinput,
.fsp-picker .fsp-picker__sources,
.fsp-picker .fsp-picker__services,
.fsp-picker .fsp-picker__dragdrop,
.fsp-picker .fsp-picker__browse {
background-color: #ffffff !important;
color: #575f66 !important;
}
/* Dropzone styling */
.fsp-picker .fsp-dropzone,
.fsp-picker .fsp-drop-area {
background-color: #f8f9fa !important;
border: 2px dashed #55b4d4 !important;
color: #575f66 !important;
}
.fsp-picker .fsp-dropzone:hover,
.fsp-picker .fsp-drop-area:hover {
background-color: #f0f2f5 !important;
}
.fsp-picker .fsp-drop-area__title {
color: #575f66 !important;
font-size: 18px;
font-weight: bold;
}
.fsp-picker .fsp-drop-area__subtitle {
color: #55b4d4 !important;
font-size: 14px;
}
/* Grid layout for files/items */
.fsp-picker .fsp-grid {
background-color: #ffffff !important;
padding: 20px;
}
.fsp-picker .fsp-grid__cell {
background-color: #f8f9fa !important;
color: #575f66 !important;
border: 1px solid #e6e6e6 !important;
border-radius: 8px;
transition: all 0.3s ease;
}
.fsp-picker .fsp-grid__cell:hover {
background-color: #f0f2f5 !important;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
/* Button styling */
.fsp-picker .fsp-button {
background-color: #f3f4f5 !important;
color: #575f66 !important;
border: 1px solid #e6e6e6 !important;
border-radius: 6px;
padding: 8px 16px;
transition: all 0.3s ease;
}
.fsp-picker .fsp-button:hover {
background-color: #e6e6e6 !important;
}
.fsp-picker .fsp-button--primary {
background-color: #55b4d4 !important;
color: #ffffff !important;
border: none !important;
}
.fsp-picker .fsp-button--primary:hover {
background-color: #4da3c0 !important;
}
/* Specific button styles */
.fsp-picker .fsp-button--folder {
background-color: #55b4d4 !important;
color: #ffffff !important;
border: none !important;
}
.fsp-picker .fsp-button--folder:hover {
background-color: #4da3c0 !important;
}
.fsp-picker .fsp-button--cancel {
background-color: #ff9940 !important;
color: #ffffff !important;
border: none !important;
}
.fsp-picker .fsp-button--cancel:hover {
background-color: #ff8a29 !important;
}
/* Left sidebar/sources panel */
.fsp-picker .fsp-source-list {
background-color: #f3f4f5 !important;
border-right: 1px solid #e6e6e6 !important;
}
.fsp-picker .fsp-source-item {
background-color: #f3f4f5 !important;
color: #575f66 !important;
border-bottom: none !important;
}
.fsp-picker .fsp-source-item:hover,
.fsp-picker .fsp-source-item.fsp-active {
background-color: #e6e6e6 !important;
}
.fsp-picker .fsp-source-list .fsp-source-item__icon {
color: #575f66 !important;
}
/* My Device section (duplicate, consider consolidating if same as .fsp-source-item) */
.fsp-picker .fsp-source-list__item {
background-color: #f3f4f5 !important;
color: #575f66 !important;
border-bottom: none !important;
}
/* This rule seems to have a typo 'fsp-button fsp-button--cancel', check if it's needed */
/* .fsp-picker .fsp-button fsp-button--cancel {
text-align: center !important;
background-color: red !important;
} */
.fsp-picker .fsp-source-list__item:hover,
.fsp-picker .fsp-source-list__item--active {
background-color: #e6e6e6 !important;
}
.fsp-picker .fsp-source-list__label {
color: #575f66 !important;
}
/* Accordion styling */
.fsp-content .accordion-item .accordion-header,
.fsp-summary__item.accordion-header {
background-color: #f3f4f5 !important;
color: #575f66 !important;
border-bottom: 1px solid #e6e6e6 !important;
padding: 12px;
cursor: pointer;
}
.fsp-content .accordion-item .accordion-content {
background-color: #ffffff !important;
color: #575f66 !important;
border: 1px solid #e6e6e6 !important;
}
/* Center button text */
.fsp-picker .fsp-button.fsp-button--primary.fsp-button-upload,
.fsp-picker .fsp-button.fsp-button--cancel {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
}
/* Footer styling */
.fsp-picker .fsp-footer,
.fsp-picker .fsp-footer--appeared {
background-color: #f3f4f5 !important;
color: #575f66 !important;
border-top: 1px solid #e6e6e6 !important;
}
.fsp-picker .fsp-footer__nav {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
background-color: #f3f4f5 !important;
padding: 12px;
}
.fsp-picker .fsp-footer__nav--left,
.fsp-picker .fsp-footer__nav--right {
flex: 1;
}
.fsp-picker .fsp-footer__nav--right {
text-align: right;
}
.fsp-picker .fsp-footer__nav--right > div {
display: inline-flex;
gap: 8px;
}
/* Select Folders button */
.fsp-picker .fsp-drop-area__button {
background-color: #ff9940 !important;
color: #ffffff !important;
border: none !important;
padding: 8px 16px;
border-radius: 6px;
font-weight: bold;
}
.fsp-picker .fsp-drop-area__button:hover {
background-color: #ff8a29 !important;
}Adding Polish with Animations
Styling is not limited to colors. You can add CSS transitions to provide feedback and make the UI feel more responsive. More than simple fades, you can add more complex effects to buttons and drop zones. For example, you can give buttons a “lift and shadow” effect on hover using transform: translateY(-2px) and a box-shadow. For a more playful feel, a cubic-bezier timing function can create a bouncy effect, or a transform: rotate(-5deg) can be applied to the drop area button on hover.
Animated Filestack Picker
Animated Filestack Picker CSS
/* Ayu Light theme customization */
.fsp-picker {
background: rgba(255, 255, 255, 0.9) !important;
}
.fsp-picker .fsp-modal,
.fsp-picker .fsp-modal-backdrop,
.fsp-picker .fsp-modal-dialog,
.fsp-picker .fsp-modal-content,
.fsp-picker .fsp-content,
.fsp-picker .fsp-panel,
.fsp-picker .fsp-page,
.fsp-picker .fsp-page-inner,
.fsp-picker .fsp-wrapper,
.fsp-picker .fsp-row,
.fsp-picker .fsp-col,
.fsp-picker .fsp-summary__action {
background-color: #FAFAFA !important;
color: #575F66 !important;
}
.fsp-picker .fsp-header,
.fsp-picker .fsp-navbar,
.fsp-picker .fsp-nav,
.fsp-picker .fsp-nav-tabs,
.fsp-picker .fsp-toolbar,
.fsp-picker .fsp-menu,
.fsp-picker .fsp-breadcrumb,
.fsp-picker .fsp-modal-header,
.fsp-picker .fsp-panel-title,
.fsp-picker .fsp-title,
.fsp-picker .fsp-lbl {
background-color: #F3F4F5 !important;
color: #575F66 !important;
border-bottom: 1px solid #E6E6E6 !important;
}
.fsp-picker .fsp-body,
.fsp-picker .fsp-panel-body,
.fsp-picker .fsp-gallery,
.fsp-picker .fsp-list,
.fsp-picker .fsp-list-wrapper,
.fsp-picker .fsp-tab-panel,
.fsp-picker .fsp-file-selector,
.fsp-picker .fsp-picker__fileinput,
.fsp-picker .fsp-picker__sources,
.fsp-picker .fsp-picker__services,
.fsp-picker .fsp-picker__dragdrop,
.fsp-picker .fsp-picker__browse {
background-color: #FFFFFF !important;
color: #575F66 !important;
}
.fsp-picker .fsp-dropzone,
.fsp-picker .fsp-drop-area {
background-color: #F8F9FA !important;
border: 2px dashed #55B4D4 !important;
color: #575F66 !important;
}
.fsp-picker .fsp-dropzone:hover,
.fsp-picker .fsp-drop-area:hover {
background-color: #F0F2F5 !important;
}
.fsp-picker .fsp-drop-area__title {
color: #575F66 !important;
font-size: 18px;
font-weight: bold;
}
/* Subtitle Styles */
.fsp-picker .fsp-drop-area__subtitle {
color: #55B4D4 !important; /* Default text color */
font-size: 14px;
transition: all 0.3s ease; /* Smooth transitions */
}
/* SVG Icon (hidden by default) */
.fsp-picker .fsp-drop-area__subtitle::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background-size: contain;
opacity: 0;
transition: all 0.3s ease;
transform: translate(-50%, -50%) scale(0);
}
/* Hover State - Text + Icon */
.fsp-picker .fsp-drop-area:hover .fsp-drop-area__subtitle {
color: #FF8A29 !important; /* Hover text color */
position: relative;
padding-left: 24px; /* Space for icon */
}
/* SVG Icon (visible on hover) */
.fsp-picker .fsp-drop-area:hover .fsp-drop-area__subtitle::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
background-size: contain;
}
/* To modify the behavior:
1. Change colors by editing the hex values (#FF8A29, #55B4D4)
2. Adjust icon size by changing width/height (20px)
3. Change icon position by modifying left/top/transform
4. Replace the SVG by editing the data URL
5. Adjust spacing with padding-left
*/
.fsp-picker .fsp-button--primary {
background-color: #55B4D4 !important;
color: #FFFFFF !important;
border: none !important;
transition: all 0.2s ease-in-out !important;
transform: translateY(0) !important;
}
.fsp-picker .fsp-button--primary:hover {
background-color: #4DA3C0 !important;
transform: translateY(-2px) !important;
box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
}
.fsp-picker .fsp-button--primary:active {
transform: translateY(0) !important;
box-shadow: none !important;
}
/* Folder selection button */
.fsp-picker .fsp-button--folder {
background-color: #55B4D4 !important;
color: #FFFFFF !important;
border: none !important;
transition: all 0.2s ease-in-out !important;
transform: translateY(0) !important;
}
.fsp-picker .fsp-button--folder:hover {
background-color: #4DA3C0 !important;
transform: translateY(-2px) !important;
box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
}
.fsp-picker .fsp-button--folder:active {
transform: translateY(0) !important;
box-shadow: none !important;
}
.fsp-picker .fsp-button--cancel {
background-color: #FF9940 !important;
color: #FFFFFF !important;
border: none !important;
transition: all 0.8s ease-in-out !important;
transform: translateY(0) !important;
}
.fsp-picker .fsp-button--cancel:hover {
background-color: #FF8A29 !important;
transform: translateY(-2px) !important;
box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
}
.fsp-picker .fsp-button--cancel:active {
transform: translateY(0) !important;
box-shadow: none !important;
}
/* Left sidebar/sources panel */
.fsp-picker .fsp-source-list {
background-color: #F3F4F5 !important;
border-right: 1px solid #E6E6E6 !important;
}
.fsp-picker .fsp-source-item {
background-color: #F3F4F5 !important;
color: #575F66 !important;
border-bottom: none !important;
}
.fsp-picker .fsp-source-item:hover,
.fsp-picker .fsp-source-item.fsp-active {
background-color: #E6E6E6 !important;
}
.fsp-picker .fsp-source-list .fsp-source-item__icon {
color: #575F66 !important;
}
/* My Device section */
.fsp-picker .fsp-source-list__item {
background-color: #F3F4F5 !important;
color: #575F66 !important;
border-bottom: none !important;
}
.fsp-picker .fsp-button fsp-button--cancel{
text-align: center !important;
background-color: red !important;
}
.fsp-picker .fsp-source-list__item:hover,
.fsp-picker .fsp-source-list__item--active {
background-color: #E6E6E6 !important;
}
.fsp-picker .fsp-source-list__label {
color: #575F66 !important;
}
/* Accordion styling */
.fsp-content .accordion-item .accordion-header,
.fsp-summary__item.accordion-header {
background-color: #F3F4F5 !important;
color: #575F66 !important;
border-bottom: 1px solid #E6E6E6 !important;
padding: 12px;
cursor: pointer;
}
.fsp-content .accordion-item .accordion-content {
background-color: #FFFFFF !important;
color: #575F66 !important;
border: 1px solid #E6E6E6 !important;
}
/* Center button text */
.fsp-picker .fsp-button.fsp-button--primary.fsp-button-upload,
.fsp-picker .fsp-button.fsp-button--cancel {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
}
/* Footer styling */
.fsp-picker .fsp-footer,
.fsp-picker .fsp-footer--appeared {
background-color: #F3F4F5 !important;
color: #575F66 !important;
border-top: 1px solid #E6E6E6 !important;
}
.fsp-picker .fsp-footer__nav {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
background-color: #F3F4F5 !important;
padding: 12px;
}
.fsp-picker .fsp-footer__nav--left,
.fsp-picker .fsp-footer__nav--right {
flex: 1;
}
.fsp-picker .fsp-footer__nav--right {
text-align: right;
}
.fsp-picker .fsp-footer__nav--right > div {
display: inline-flex;
gap: 12px;
}
/* Footer button animations */
.fsp-picker .fsp-footer__nav .fsp-button--cancel {
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
transform: scale(1) !important;
}
.fsp-picker .fsp-footer__nav .fsp-button--cancel:hover {
transform: scale(1.05) translateY(-2px) !important;
box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
}
.fsp-picker .fsp-footer__nav .fsp-button--cancel:active {
transform: scale(0.98) !important;
}
.fsp-picker .fsp-footer__nav .fsp-button--primary {
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
transform: scale(1) !important;
position: relative;
overflow: hidden;
}
.fsp-picker .fsp-footer__nav .fsp-button--primary:hover {
transform: scale(1.1) !important;
box-shadow: 0 6px 12px rgba(85, 180, 212, 0.3) !important;
}
.fsp-picker .fsp-footer__nav .fsp-button--primary:active {
transform: scale(0.95) !important;
}
.fsp-picker .fsp-footer__nav .fsp-button--primary::after {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: rgba(255,255,255,0.2);
transform: rotate(30deg) translate(-20px, -40px);
transition: all 0.5s ease;
opacity: 0;
}
.fsp-picker .fsp-footer__nav .fsp-button--primary:hover::after {
transform: rotate(30deg) translate(20px, 40px);
opacity: 1;
}
.fsp-picker .fsp-badge--bright {
transition: all 0.3s ease !important;
transform: scale(1) !important;
}
.fsp-picker .fsp-button--primary:hover .fsp-badge--bright {
transform: scale(1.2) !important;
background-color: #3d8ba8 !important;
}
/* Select Folders button */
.fsp-picker .fsp-drop-area__button {
background-color: #FF9940 !important;
color: #FFFFFF !important;
border: none !important;
padding: 12px 24px !important;
border-radius: 6px !important;
font-weight: bold !important;
font-size: 18px !important;
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
transform: rotate(0deg) scale(1) !important;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}
.fsp-picker .fsp-drop-area__button:hover {
background-color: #FF8A29 !important;
transform: rotate(-5deg) scale(1.1) !important;
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2) !important;
letter-spacing: 1px !important;
}
.fsp-picker .fsp-drop-area__button:active {
transform: rotate(0deg) scale(0.95) !important;
}
/* Drop area hover effects */
.fsp-picker .fsp-drop-area:hover {
background-color: #F0F2F5 !important;
border-color: #FF9940 !important;
box-shadow: 0 0 0 4px rgba(255, 153, 64, 0.2) !important;
transition: all 0.3s ease !important;
}
.fsp-picker .fsp-drop-area:hover .fsp-drop-area__title {
transform: translateY(-5px) !important;
color: #FF9940 !important;
}
.fsp-picker .fsp-drop-area:hover .fsp-drop-area__subtitle {
transform: translateY(5px) !important;
color: #FF8A29 !important;
}
.fsp-picker .fsp-drop-area__title {
font-size: 22px !important;
font-weight: bold !important;
background: linear-gradient(90deg, #FF9940, #55B4D4, #FF9940) !important;
background-size: 200% auto !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
text-fill-color: transparent !important;
animation: gradientShift 0.3s linear infinite !important;
transform: translateY(0) !important;
transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
position: relative;
display: inline-block;
}
.fsp-picker .fsp-drop-area__title::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
}
/* Base style for the subtitle */
.fsp-picker .fsp-drop-area__subtitle {
color: #55B4D4 !important;
font-size: 0.875rem; /* text-sm */
position: relative;
text-align: center;
padding: 0.25rem 0.5rem; /* py-1 px-2 */
border-radius: 0.25rem; /* rounded */
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 300ms; /* duration-300 */
}
/* Hover state */
.fsp-picker .fsp-drop-area:hover .fsp-drop-area__subtitle {
background-color: #0369a1 !important; /* bg-sky-700 */
color: white !important; /* text-white */
}
@keyframes gradientShift {
0% { background-position: 0% center; }
100% { background-position: 200% center; }
}
@keyframes rainbow {
0% { color: #FF9940 !important; }
20% { color: #FFD166 !important; }
40% { color: #55B4D4 !important; }
60% { color: #06D6A0 !important; }
80% { color: #EF476F !important; }
100% { color: #FF9940 !important; }
}
.fsp-picker .fsp-drop-area:hover .fsp-drop-area__title {
transform: translateY(-5px) !important;
animation-duration: 0.2s !important;
}
.fsp-picker .fsp-drop-area:hover .fsp-drop-area__subtitle {
transform: translateY(5px) !important;
animation-duration: 0.2s !important;
font-weight: bold !important;
}
Final Notes
These themes are a starting point. The official documentation contains a complete list of CSS classes for styling every part of the picker, from the drop pane to progress bars. Use them to build an uploader that fits your application.
A Product Marketing Manager at Filestack with four years of dedicated experience. As a true technology enthusiast, they pair marketing expertise with a deep technical background. This allows them to effectively translate complex product capabilities into clear value for a developer-focused audience.