Ghost Design System - React Components library

Demo

Available components:

• Atoms:
  • Badge (notification and indicator)
  • Icons
  • Layout
    • Col
    • Row
    • Section
    • Separator
  • Link
  • Modal
  • Portal
  • Pulsar
  • Theme
  • Tooltip
  • Typography
    • Text
    • Title
• Molecules:
  • Amount field
  • Banner
  • Button
  • Checkbox field
  • Datepicker field
  • File field
  • Percentage field
  • Popover
  • Rich Text field
  • Select field:
    • Single
    • Multi
    • Autocomplete (aka Dynamic Search)
    • Autocomplete creatable (aka Dynamic Search Creatable)
  • Switch field
  • Textarea field
  • Text field
  • Toaster
  • YearPicker field
• Organisms:
  • ActionBar
  • DataTable:
    • Generic Data Table
    • Editable Data Table (full editable)
    • Line editable Data Table (editon in popup form with data validation)
    • Line editable in place data table (edition of a line in place)
    • Static data table
    • Colunns
  • Filter
  • Form:
    • Form component
    • useForm hook
    • useFormLegacy hook
  • NavBar
  • SideBar
• Templates:
  • Portfolio

Usage

1. Run the command:

npm install ghost-design-system

3. Load the required icon set and initialize the ThemeProvider, for example in your index.tsx :

import { loadIcons, ThemeProvider } from 'ghost-design-system';
import '~ghost-design-system/dist/ghost-design-system.css';

loadIcons();

const App = () => {
  return (
    <ThemeProvider>
      <RestOfYourApp />
    </ThemeProvider>
  );
};

5. You should be ready to use any of the components of the library.

---

References

This react components library uses the following:

• @fortawesome
• @szhsin/react-menu
• classnames
• date-fns
• lodash
• numeral
• react-collapsed
• react-datepicker
• react-hot-toast
• react-infinite-scroller
• react-intersection-observer
• react-number-format
• react-query
• react-select
• react-textarea-autosize
• suneditor
• tippyjs
• yup

Peer dependencies:

• react
• react-dom
• react-router-dom

Dev dependencies:

• ESLint
• Jest
• Prettier
• Rollup
• SASS
• Storybook
• Testing-library
• Typescript

---

To go further