Action Popup

A modal that appears on the screen when users click a button

How it works:

  • Insert the component at the top level of the page. Ex: <ActionPopup/>
  • Add the required props: header, show, body, onClose
  • Hook up the toggle functionality to a button using setState

Live Demo:

Form Creatable Select

A component that allows you to create a drop down that allows for custom user input along with dropdown options. Connects to React Hook Forms

How it works:

  • Integrates with React Hook Form
  • Type and press Enter/Tab to create new options
  • Supports multi-select functionality
  • Pre-populated with default options

Live Demo:

Type and press Enter or Tab to create tags...

Current value: []

Form Select

A component that allows you to create a drop down that allows for custom user input. Connects to React Hook Forms

How it works:

  • Integrates seamlessly with React Hook Form
  • Supports single and multi-select modes
  • Customizable styling and validation
  • Helper text and error message support

Live Demo:

Select one of the predefined options

Current value: {"value":"","label":""}

Tanstack Table

A component built on tanstack table with the functionality of react data grid

How it works:

  • Testing

Live Demo:

ID
Name
Email
Age
Department
Salary
Status
Join Date
1Alice Johnson[email protected]28 yrsEngineering$95,000ActiveMar 15, 2021
2Bob Smith[email protected]35 yrsMarketing$78,000ActiveJul 22, 2019
3Carol Williams[email protected]42 yrsEngineering$125,000ActiveJan 10, 2018
4David Brown[email protected]31 yrsSales$85,000On LeaveMay 18, 2020
5Emma Davis[email protected]26 yrsEngineering$88,000ActiveFeb 1, 2022
6Frank Martinez[email protected]39 yrsHR$72,000ActiveNov 30, 2019
7Grace Lee[email protected]33 yrsMarketing$82,000InactiveAug 14, 2020
8Henry Wilson[email protected]45 yrsEngineering$135,000ActiveApr 20, 2017
Page 1 of 2
Sitebolts Button (SButton)

A fully modular button that allows you to create variants across various pages. Contains loading states and the ability to connect to forms

How it works:

  • Multiple variants for different use cases
  • Built-in loading states with spinner
  • Support for React Router Link navigation
  • Form submission integration
  • Customizable sizes and styling

Live Demo:

Text Field Form

A fully modular text field that can be an input or textarea. Connects to React Hook Forms

How it works:

  • Integrates with React Hook Form for validation
  • Supports both input and textarea modes
  • Built-in error handling and helper text
  • Customizable styling and validation rules
  • Keyboard event handling support

Live Demo:

Text Input Example
Text Area Example

Current Form Values:

{
  "textField": "",
  "textAreaField": "",
  "selectField": {
    "value": "",
    "label": ""
  },
  "creatableSelectField": []
}