README
Welcome to Fox UI ⚡️
Works out of the box. Fox UI contains a set of polished React components that work out of the box.
Flexible & composable. Fox UI components are built on top of a React UI Primitive for endless composability.
Accessible. Fox UI components follows the WAI-ARIA guidelines specifications.
Dark Mode 😍: All components are dark mode compatible.
Looking for the documentation?
Installing Fox UI
⚡️Fox UI is made up of multiple components and tools which you can import one
by one. All you need to do is install the @rafcin/react
package:
$ yarn add @rafcin/react
# or
$ npm install --save @rafcin/react
Getting set up
To start using the components, please follow these steps:
- Wrap your application in a
ThemeProvider
provided by @rafcin/react
import { ThemeProvider, ColorModeProvider } from "@rafcin/react"
const App = ({ children }) => (
<ThemeProvider>
<ColorModeProvider>{children}</ColorModeProvider>
</ThemeProvider>
)
ColorModeProvider
is a context that provides light mode and dark mode values
to the components. It also comes with a function to toggle between light/dark
mode.
- Now you can start using components like so!:
import { Button } from "@rafcin/react"
const App = () => <Button>I just consumed some ⚡️Fox!</Button>
Contributing
Feel like contributing? That's awesome! We have a contributing guide to help guide you.
The components to be built come from the Aria Practices Design Patterns and Widgets.
Contributors ✨
Thanks goes to these wonderful people (emoji key):
Segun Adebayo 💻 🚧 📖 💡 🎨 |
Tioluwani Kolawole 📖 💡 🚧 |
This project follows the all-contributors specification. Contributions of any kind welcome!