@tonto/hoosatui NPM

HoosatUI

HoosatUI is a user interface library for React and SASS that provides a set of reusable UI components to quickly build beautiful and responsive user interfaces. First version was done with Tailwind, currently moving everything to use SASS and adding components and more readable code.

Installation

You can install HoosatUI via npm:

npm install @tonto/hoosat-ui

Or via git submodule:

git submodule add https://github.com/TMKCodes/HoosatUI

Usage

Import any component from HoosatUI and use it in your React application:

import React from 'react';
import { Button } from '@tonto/hoosat-ui';

const App = () => {
  return (
    <Button onClick={() => console.log('clicked!')}>Click me!</Button>
  );
}

export default App;

Components

HoosatUI currently provides the following components:

Form Elements

Button: A button element
Checkbox: A checkbox input
Combobox: A select input with an editable text input
Input: A text input
Label: A label for an input
Select: A select input
Option: An option for a select input
Textarea: A text area input

Layout Elements

Flex: A container for creating flexible layouts with child elements
FlexItem: An item within a Flex container
Grid: A container for creating grid layouts with child elements
GridItem: An item within a Grid container

Typography Elements

Heading: A heading element with options for h1 through h6
Paragraph: A paragraph element
List: A list element
ListItem: An item within a List

Table Elements

Table: A table element
THead: A table head element
TBody: A table body element
Tr: A table row element
Th: A table header cell element
Td: A table data cell element

Media elements

Source: A source element used within an Audio or Video
Video: A video element for playing video files
Image: An image element
ImageMap: An image map element
Audio: An audio element for playing audio files

Miscellaneous Elements

Anchor: An anchor element for linking to another page or section within the same page
Area: An area element used within an ImageMap
Message: A message element for displaying information or feedback to the user
Modal: A modal element for displaying content in a layer over the rest of the page
ModalBody: The body of a modal element
ModalFooter: The footer of a modal element
ModalHeader: The header of a modal element

Contributing

Contributions to HoosatUI are welcome! If you find a bug or have a feature request, please open an issue on GitHub. If you would like to contribute code, please open a pull request with your changes.

Please ensure that your code passes the existing tests and add new tests as appropriate.