React-felix-ui NPM

Felix UI is an open source react component library which extends as a CSS styling framework, which helps developers to use best styles and components, by using pre-defined classnames. Felix UI helps you to quickly build your dream project, by focusing much on functionality, because we take care of your designs.

Looking for documentation? 📝

For examples and code samples, check out in depth Documentation

Installing Felix UI

To use Felix UI components in react, all you need to do is install the react-felix-ui package.

$ npm i react-felix-ui

Usage

To start using the components, please follow these steps:

Wrap your application with the FelixProvider provided by react-felix-ui.

import { FelixProvider } from "react-felix-ui"

// Do this at the root of your application
function App({ children }) {
    return <FelixProvider>{children}</FelixProvider>
}

Felix UI ships with easy to use utility classes. To add CSS Import global CSS file from the package, in your index.js file.

// import Felix UI global CSS file
import "react-felix-ui/dist/cjs/index.css"

ReactDOM.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>,
    document.getElementById("root")
)

Now you can start using components like so!:

import { Button } from "react-felix-ui"

function Example() {
    return <Button>Created a button</Button>
}

Use as a styling framework

Felix UI can be used as a styling framework for your vanilla HTML CSS projects also. To start using the components in your project, Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS.

<link rel="stylesheet" href="https://felix-ui-dev.netlify.app/components/main.css" />

Introduction to Felix UI

UI Components

Colors

Colors are integral part of a UI and UX. Felix UI ship with aesthetically pleasing color pallet.

To find more detail on the below topics visit documentation on Colors

Color	Hex
Primary	#3bb77e
Secondary	#2d3748
Gray	#626262
Success	#20a779
Error	#fd4e4e
Warning	#f8aa1c
Info	#007bc3

Detailed color pallet
Utility classes for colors

Typography

Use Typography to format text content on your web site.

To find more detail on the below topics visit documentation on Typography

Display
Headings
Alignment
Inline text elements

Alert

Alerts are used to communicate a state that affects a system, feature or page. Alerts can be used to important messages to the user.

To find more detail on the below topics visit documentation on Alert

Primary alert
Error alert
Info alert
Success alert
Warning alert

Avatar

Avatar is used to represent a user, and displays the profile picture or initials.

To find more detail on the below topics visit documentation on Avatar

Name initials avatars
Different sized avatars
Avatar groups
Avatar with badge for status

Badge

Badges are used to highlight an item's status for quick recognition. Badge can be used to show notification count.

To find more detail on the below topics visit documentation on Badge

Badge on icons
Badge on text

Button

The Button component is used to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.

To find more detail on the below topics visit documentation on Button