Build Fast, Scale High - just plug and play UI components

Sexy-UI simplifies the first step in your production process by providing super-accessible plug and play UI components

Explore the docs »
Report a Bug · Request a Feature · Ask a Question

---

Looking for the documentation? 📝

Each package has a super detailed description of how it's meant to be used in a ReadMe - including a useCase file you can import into the main App.tsx as a sample implementation!

Latest version (v0.0.2) More documentation can be found on our official site and on our storybook

Features 🚀

• Super Fast Load times
• Industry Standard Accessibility
• Dark Mode Ready
• Fully Responsive
• Premium Documentation
• SSR Ready
• Open Source

Support Sexy-UI 💖

We'd love your input in any way you can provide! Please take a look at our contributions guide or the discussions board or reach out to us via gellera800@gmail.com if you would like to get on the team as a maintainer/mentor.

Individuals

Lead Developer - Geller Micael

Organizations

YouGo Fullstack Mentoring Group

Inked-in Technical Writing Community

Installing Sexy UI

To get started using Sexy-UI Components, install the @sexy-ui/react package and its peer dependencies:

$ yarn add ``@sexy-ui/react`` styled-components framer-motion@^5

# or

$ npm i ``@sexy-ui/react`` styled-components framer-motion@^5

Usage

To start using the components, please follow these steps:

1. Wrap your application with the SexyProvider provided by @sexy-ui/react.

import { SexyProvider } from "@sexy-ui/react";

// Do this at the root of your application
const App = ({ children }) => {
  return <SexyProvider>{children}</SexyProvider>;
};

Optionally, you can wrap your application with the ToggleColorsProvider so you can toggle between light and dark mode within your app.

2. Here's how to use components:

import { Button } from "@sexy-ui/react";

const useCase = () => {
  return <Button>This Button just got sexier! </Button>;
};

CodeSandbox Templates

Currenty building out accessible templates for rapid usage and testing with CodeSandbox and CodePen.

Contributing

Looking to contribute? Marvelous!

Take a peek at our contributions guide to get started or join the mentoring server to get all your questions answered!

Contributors

Big Thanks to our amazing Gang of Thieves!

Geller99 💻 🚧 📖 💡 🎨

This project follows the all-contributors specifications.

License

MIT © Geller Micael