funuicss

The React & Next Js Ui Library

The framework is easy to integrate, just install the package and import the CSS file

Why Choose FunUi

• The framework is build in modules, you just need to import the module you want to use
• The framework is build with flexbox, which makes it easy to fit all screen sizes
• The framework is easy to integrate, just install the package and import the CSS file

Learn how to use the framework at our official website 👎

https://funui.netlify.app

Installation

Using Npm

Install the package via NPM

npm install funuicss

Using Yarn

Install the package via NPM

yarn add funuicss

Import CSS file

Import the css file at your entry point to apply our classes,for example: _app.js, _app.jsx, index.js, index,jsx files

import 'funuicss/css/fun.css'

Demo Login Form

Create a simple login form with our framework.

import React from 'react'
import Text from 'funuicss/ui/text/Text'
import Input from 'funuicss/ui/input/Input'
import Button from 'funuicss/ui/button/Button'
import Section from 'funuicss/ui/specials/Section'
export default function App() {

return (

<div>
<div className="central height-500-min" >
 <div className='width-300-max fit'>
<div className="margin-bottom-40">
<Text
text='Welcome'
heading='h2'
block
/>
<Text
text='Sign in to continue!'
block
/>
</div>
<Section gap={1.5}>
<Text text="Email" funcss="margin-bottom-10" block size="small" bold color="primary"/>
<Input type="email" fullWidth bordered />
</Section>
<Section gap={1}>
<Text text="Password" funcss="margin-bottom-10" block size="small" bold color="primary"/>
<Input type="password" fullWidth bordered />
</Section>

<div className="section">
  <Link href={"/#"}>
      <Text text='Forgot password!' size='small' underline color='primary'/>
  </Link>
</div>
<div className="section">
  <Button
  text={"Let's go"}
  raised
  fullWidth
  bg='primary800'
  />
</div>

</div>
</div>
</div>

)
}

Simple Buttons

This is a simple button

import React from 'react'
import Button from 'funuicss/ui/button/Button'

export default function App() {
return (
<Button  bg="primary" outlined text="Simple Button"/>
)
}

Simple Input

This is a simple input

import React from 'react'
import Input from 'funuicss/ui/input/Input'

export default function App() {
return (
<>
<Input 
type="text" 
label="This is a simple input" 
funcss="full-width"
/>
<Input 
type="text" 
bordered 
label="This is a bordered" 
funcss="full-width section"
/>
</>
)
}

Documentaion

Check our Documentation for more examples and explanation

• Documentation
• Installing
• Components
• Dark Mode
• Icons
• Notifications

License

The project is licensed under the terms of MIT