@restart/ui

What is @restart/ui?

@restart/ui is a collection of reusable UI components and utilities for building React applications. It provides a set of accessible and customizable components that can be used to create complex user interfaces with ease.

What are @restart/ui's main functionalities?

Dropdown

The Dropdown component provides a toggleable menu for displaying a list of links or actions. It is fully accessible and customizable.

import { Dropdown } from '@restart/ui';

function Example() {
  return (
    <Dropdown>
      <Dropdown.Toggle id="dropdown-basic">
        Dropdown Button
      </Dropdown.Toggle>

      <Dropdown.Menu>
        <Dropdown.Item href="#/action-1">Action</Dropdown.Item>
        <Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
        <Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
      </Dropdown.Menu>
    </Dropdown>
  );
}

Modal

The Modal component is used to create dialog boxes or pop-ups. It is fully accessible and can be customized to fit various use cases.

import { Modal } from '@restart/ui';

function Example() {
  const [show, setShow] = useState(false);

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  return (
    <>
      <Button variant="primary" onClick={handleShow}>
        Launch demo modal
      </Button>

      <Modal show={show} onHide={handleClose}>
        <Modal.Header closeButton>
          <Modal.Title>Modal heading</Modal.Title>
        </Modal.Header>
        <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={handleClose}>
            Close
          </Button>
          <Button variant="primary" onClick={handleClose}>
            Save Changes
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}

Tooltip

The Tooltip component provides contextual information when users hover over or focus on an element. It is fully accessible and customizable.

import { Tooltip, OverlayTrigger } from '@restart/ui';

function Example() {
  const renderTooltip = (props) => (
    <Tooltip id="button-tooltip" {...props}>
      Simple tooltip
    </Tooltip>
  );

  return (
    <OverlayTrigger
      placement="right"
      delay={{ show: 250, hide: 400 }}
      overlay={renderTooltip}
    >
      <Button variant="success">Hover me to see</Button>
    </OverlayTrigger>
  );
}

Other packages similar to @restart/ui

react-bootstrap

React-Bootstrap is a popular library that provides Bootstrap components as React components. It offers a wide range of UI components similar to @restart/ui, but with the added benefit of Bootstrap's styling and theming capabilities.

material-ui

Material-UI is a comprehensive library of React components that implement Google's Material Design. It offers a wide range of components and utilities, similar to @restart/ui, but with a focus on Material Design principles.

semantic-ui-react

Semantic UI React is the official React integration for Semantic UI. It provides a set of React components that are styled using Semantic UI's CSS framework. It offers similar functionalities to @restart/ui but with a different design philosophy.

README

Restart UI

A set of full featured, extensible, and accessible UI components, designed to integrate into any styling framework or system. Restart components, are "headless", meaning they don't provide any styles. Components encapsulate the complicated logic and and state without being prescriptive about their look and feel.

Documentation

https://react-restart.github.io/ui/

Installation

npm install --save @restart/ui

Contributing

Checkout the repo and setup the project:

1. Bootstrap your environment yarn bootstrap
2. Start the development server yarn start