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.
For examples and code samples, check out in depth Documentation
To use Felix UI components in react, all you need to do is install the react-felix-ui package.
$ npm i react-felix-uiTo start using the components, please follow these steps:
- Wrap your application with the
FelixProviderprovided 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
Importglobal CSS file from the package, in yourindex.jsfile.
// 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>
}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" />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 | |
| Secondary | |
| Gray | |
| Success | |
| Error | |
| Warning | |
| Info |
- Detailed color pallet
- Utility classes for colors
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
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 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
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
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
- Solid primary buttons
- Outlined primary buttons
- Link button
- Icon button
Card are used to show user related data collectively, like product details. Cards can be proved very useful while building websites with huge data.
To find more detail on the below topics visit documentation on Card
- Horizontal text card
- Vertical item card
- Text overlay card
- Dismiss card
CSS Grid can be used to structure elements in columns.
To find more detail on the below topics visit documentation on Grid
- Two columns grid
- Three columns grid
Image can be used to display large picture on the website.
To find more detail on the below topics visit documentation on Image
- Responsive image
- Round image
The input is used to get user input in a text field to feed into the system.
To find more detail on the below topics visit documentation on Input
- Form input
- Form input with validation
List can be used to show a list of items.
To find more detail on the below topics visit documentation on List
- Numbered list
- Lowercase alpha list
- Uppercase alpha list
- Disc list
- Square list
- Circle list
- NO pre-styled list
Modal can be used for creating dialog boxes, to communicate with user.
To find more detail on the below topics visit documentation on Modal
- Modal component
- Modal demo
Navigation can be used to give the user facility to navigate between different pages.
To find more detail on the below topics visit documentation on Navigation
- Desktop variation
Rating can be used to show ratings on the product, or it can also be used for taking ratings from the user.
To find more detail on the below topics visit documentation on Rating
- Filled rating
Toast can be used to show notifications to the user.
To find more detail on the below topics visit documentation on Toast
- Success toast
- Error toast
- Warning toast
- Info toast
Sliders are used to decide range for something like sound in videos, price in shopping sites, etc.
To find more detail on the below topics visit documentation on Slider
- Custom slider
