Skip to content

palmetto/palmetto-components

Repository files navigation

Palmetto logo

Palmetto Component Library

A React component library to power all Palmetto UI

Publish To NPM Chromatic Test Coverage

Quick Start

1. Install

yarn add @palmetto/palmetto-components

2. Import Global CSS

@import '@palmetto/palmetto-components/dist/css/utilities.css'; // Utility classes -- REQUIRED
@import '@palmetto/palmetto-components/dist/css/variables.css'; // CSS Variables -- REQUIRED
@import '@palmetto/palmetto-components/dist/css/index.css'; // Component CSS -- REQUIRED
@import '@palmetto/palmetto-components/dist/css/fonts.css'; // Included Font files -- OPTIONAL BUT ENCOURAGED

We recommend importing our global reset in order to maintain a consistent look of all components across applications.

@import '@palmetto/palmetto-components/dist/css/reset.css' // A Basic CSS Reset -- OPTIONAL BUT ENCOURAGED.

3. Usage

import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from '@palmetto/palmetto-components';

function App() {
  return <Button>Hello World</Button>;
}

ReactDOM.render(<App />, document.querySelector('#app'));

Documentation

SEE FULL DOCS HERE

Contributing

Issues and PRs welcome! See HERE for our Contribution Guide.

Raising an Issue

When raising an issue:

  • Make sure the issue hasn't been raised yet.
  • Tag issue accordingly using your best judgement. Do NOT create new tags. If you feel a new one is needed, raise it in your issue.
  • If your issue is a bug, include screenshots or animated GIFs in your issue whenever needed (if issue is visual in nature).
  • If your issue is a bug, include steps to reproduce, or link to reproducible issue, e.g.: Code Sandbox or similar. Please also provide any additional details including device, OS, browser, browser version etc.

Issues can be raised here.

License

This project is licensed under the terms of the MIT license.