https://github.com/palmetto/palmetto-components
A React component library to power all Palmetto UI.
https://github.com/palmetto/palmetto-components
components design-system react
Last synced: 10 months ago
JSON representation
A React component library to power all Palmetto UI.
- Host: GitHub
- URL: https://github.com/palmetto/palmetto-components
- Owner: palmetto
- License: mit
- Created: 2020-06-04T14:42:32.000Z (about 6 years ago)
- Default Branch: main
- Last Pushed: 2025-07-31T16:27:50.000Z (11 months ago)
- Last Synced: 2025-08-08T20:53:24.458Z (11 months ago)
- Topics: components, design-system, react
- Language: TypeScript
- Homepage: https://ux.palmetto.com
- Size: 9.7 MB
- Stars: 30
- Watchers: 34
- Forks: 6
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: docs/CONTRIBUTING.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
Palmetto Component Library
A [React](https://reactjs.org/) component library to power all Palmetto UI
[](https://github.com/palmetto/palmetto-components/actions?query=workflow%3A%22Publish+To+NPM%22)
[](https://github.com/palmetto/palmetto-components/actions?query=workflow%3AChromatic)
[](https://codeclimate.com/github/palmetto/palmetto-components/test_coverage)
## Quick Start
### 1. Install
`yarn add @palmetto/palmetto-components`
### 2. Import Global CSS
```jsx
@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.
```jsx
@import '@palmetto/palmetto-components/dist/css/reset.css' // A Basic CSS Reset -- OPTIONAL BUT ENCOURAGED.
```
### 3. Usage
```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from '@palmetto/palmetto-components';
function App() {
return Hello World;
}
ReactDOM.render(, document.querySelector('#app'));
```
## Documentation
[SEE FULL DOCS HERE](https://ux.palmetto.com)
## Contributing
Issues and PRs welcome! See [HERE](https://github.com/palmetto/palmetto-components/blob/main/docs/CONTRIBUTING.md) 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](https://github.com/palmetto/palmetto-components/issues).
## License
This project is licensed under the terms of the
[MIT license](/LICENSE).