Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/freenowtech/wave
Design System of FREE NOW
https://github.com/freenowtech/wave
component-library design-system react-components reactjs
Last synced: 6 days ago
JSON representation
Design System of FREE NOW
- Host: GitHub
- URL: https://github.com/freenowtech/wave
- Owner: freenowtech
- License: apache-2.0
- Created: 2021-03-30T14:06:10.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2025-01-09T08:11:06.000Z (26 days ago)
- Last Synced: 2025-01-22T10:07:07.585Z (13 days ago)
- Topics: component-library, design-system, react-components, reactjs
- Language: TypeScript
- Homepage: https://wave.free-now.com
- Size: 109 MB
- Stars: 65
- Watchers: 6
- Forks: 23
- Open Issues: 57
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Codeowners: CODEOWNERS
- Security: SECURITY.md
Awesome Lists containing this project
README
# Wave
[![Build Status][build-badge]][build]
[![version][version-badge]][package]
[![All Contributors][all-contributors-badge]](#contributors-)
## Documentation
Our documentation site lives at [https://wave.free-now.com/](https://wave.free-now.com/). You'll be able to find detailed documentation on getting started, all of the components, our theme, our principles, and more.
## Installation
```sh
npm install @freenow/wave
```
or
```sh
yarn add @freenow/wave
```
## Getting started
After installing Wave as dependency, there are some extra steps to get the styles in place:
- Make sure to install the peerDependencies (including styled-components)
- Check that you don't have any pre-existing global styles that might override/clash with the styles shipped with the components (ex.: `a { color: #ffeeaa }`)
- Make sure to add the desired Color Scheme component to your React tree, to get the CSS variables loaded ([more details](https://wave.free-now.com/iframe.html?viewMode=docs&id=migration-to-v2--docs#1%EF%B8%8F%E2%83%A3-connect-classic-colors))
```typescript jsx
import { ModernColors } from '@freenow/wave'; // blue primary color
ReactDOM.createRoot(document.getElementById('root')!).render(
);
```
## Contributing
Thanks for being willing to contribute! Please read the [CONTRIBUTING.md](./CONTRIBUTING.md) doc
## Have doubts?
Please don't hesitate to let know us what are your doubts, what can be improved or what is difficult for you to grasp from the documentation. Open issues to start the conversation!
## Contributors ✨
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
Nikolai Lopin
💻 📖 🐛 👀
Jonah Möller
💻 📖 🐛 👀
Luka Hartwig
💻 📖 🐛 👀
Alexis Duran
💻 📖 🐛 👀
Leonardo
💻 📖 🐛 👀
Artur Miglio
📖 💻 🐛
Phillip Barkmann
💻
Lloyd Francis
📖 💻
Jan Hamara
💻 📖 👀
rafael-sepeda
🎨 📝
martimalek
💻 📖 🐛 👀
Elena Rashkovan
💻
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
[all-contributors-badge]: https://img.shields.io/github/all-contributors/freenowtech/wave/main?style=flat-square
[build-badge]: https://img.shields.io/github/workflow/status/freenowtech/wave/Component%20Library?logo=github&style=flat-square
[build]: https://github.com/freenowtech/wave/actions?query=workflow%3Alibrary
[version-badge]: https://img.shields.io/npm/v/@freenow/wave.svg?style=flat-square
[package]: https://www.npmjs.com/package/@freenow/wave