Next Gen UI for React developers

by React

Next-Gen-UI

Next Gen UI is a home for front-end & UI/Ux developers. We provide all the necessary components required to build a scalable front-end application which suits the user experience in a unique way.
we provide :

  1. NPM package support with latest updates.
  2. HTML & ReactJs/NextJs based per-build templates which uses advance CSS Library called Tailwind CSS
  3. List your UI design.
  4. Developers support.

Visit Us on:

1. Website : nextgenui.in
2. Npm Package: next-gen-ui
3. Github: next-gen-ui Repo

Usage

Components We Provide:

  • Navbars
  • Footers
  • Forms
  • Cards
  • Hero Sections
  • Buttons
  • FAQs
  • 404

NPM Components We Provide:

  • button
  • Form Control
  • Link
  • Login
  • Search
  • Select
  • Skeleton
  • Spinner Loader
  • TextInput

NPM Usage

$ npm i 'next-gen-ui'

Imports

1. Buttons

import { Button } from 'next-gen-ui'

const App = () => {
    return(
        <Button>Click Me</Button>
    );
}

export default App;
Varients:

<Button type="danger">Click Me</Button>
<Button type="Secondary">Click Me</Button>
<Button type="Ghost">Click Me</Button>
<Button type="Disable">Click Me</Button>
<Button Loading>Secondary Button</Button>
<Button icon={(`props`) => {}}> Download ↓ </Button>
<Button size='large | default | small'>Large</Button>
2. Form Control

import React, { useState } from 'react';

import { FormControl, TextInput } from 'next-gen-ui'
import { validate as validateEmail } from 'email-validator';

const App = () => {
    const [value, setValue] = React.useState('');
    const [isValid, setIsValid] = React.useState(false);
    const [isVisited, setIsVisited] = React.useState(false);
    const shouldShowError = !isValid && isVisited;
    const onChange = (event: React.FormEvent<HTMLInputElement>) => {
        const {value} = event.currentTarget;
        setIsValid(validateEmail(value));
        setValue(value);
    };

    return (
        <FormControl
            label='Email'
            htmlFor='email'
            error={
                shouldShowError
                ? 'Please type a valid email address'
                : undefined
            }
            hint="You won't be able to change it later"
            onBlur={() => setIsVisited(true) }
        >
            <TextInput
                id='email'
                width='250px'
                value={value}
                placeholder='Enter your email'
                onChange={onChange}
                error={shouldShowError}
            />
        </FormControl>
    )
}

export default App;
Varients:

import React from 'react';
import { FormControl, TextInput } from 'next-gen-ui'

const App = () => {

    return (
            <FormControl
                label='Username'
                htmlFor='username'
                hint="You can't change this field"
                disabled
            >
                <TextInput
                    id='username'
                    width='250px'
                    value='john_doe'
                    disabled
                />
            </FormControl>
    )
}

export default App;

() => {
    const [option, setOption] = React.useState<SelectOption | undefined>(
        selectOptions[0]
    );
    const [isVisited, setIsVisited] = React.useState(false);
    const shouldShowError = !option && isVisited;

    return (
        <FormControl
            label='Country'
            htmlFor='country'
            error={
                shouldShowError
                ? 'Required field'
                : undefined
            }
            hint="The country of residence"
            forceLabel={!!option}
            onBlur={() => setIsVisited(true) }
        >
            <Select
                id='country'
                error={shouldShowError}
                width='250px'
                placeholder='Select option'
                option={option}
                listOptions={selectOptions}
                onChange={(option) => { 
                setOption(option);
                }}
            />
        </FormControl>
    )
}
3. Link

import { Link } from 'next-gen-ui'

const App = () => {
    return(
        <Link href="#">Link</Link>
    );
}

export default App;
Varients:

<Link as="span" href="#">I am span</Link>
<Link disabled href="#">
4. Auth(Login/Signup)

import { Login, Signup } from 'next-gen-ui'

const App = () => {
    return(
        <Login onSubmit={() => {}} />
        <Signup onSubmit={() => {}} />
    );
}

export default App;
5. Search

import { Search } from 'next-gen-ui'

const App = () => {
    const [value, setValue] = useState('');
    return(
        <Search
            placeholder='Search the site'
            width='400px'
            value={value}
            onChange={e => setValue(e.currentTarget.value)}
        />
    );
}

export default App;
6. Select

import { Select } from 'next-gen-ui'

const App = () => {
    const [option, setOption] = useState<SelectOption | undefined>(listOptions[1]);
    return(
       <Select
            width='250px'
            placeholder='Select option'
            option={option}
            listOptions={listOptions}
            onChange={(option) => { 
            setOption(option);
            }}
        />
    );
}

export default App;
Varients:

//with Error
() => {
  const [option, setOption] = useState<SelectOption | undefined>(listOptions[1]);
  return <Select
    error
    width='250px'
    placeholder='Select option'
    option={option}
    listOptions={listOptions}
    onChange={(option) => { 
      setOption(option);
    }}
  />
}

//Disable
() => {
  const [option, setOption] = useState<SelectOption | undefined>(listOptions[1]);
  return <Select
    disabled
    width='250px'
    placeholder='Select option'
    option={option}
    listOptions={listOptions}
    onChange={(option) => { 
      setOption(option);
    }}
  />
}

//Size
() => {
  return (
    <Row>
      <Select placeholder='large' size='large' listOptions={listOptions} />
      <Select placeholder='default' size='default' listOptions={listOptions} />
      <Select placeholder='small' size='small' listOptions={listOptions} />
    </Row>
  );
}
7. Skeleton

import { Skeleton } from 'next-gen-ui'

const App = () => {
    return(
       <Skeleton
            height={150}
            width={150}
        />
    );
}

export default App;
Varients:

<Skeleton
  borderRadius="50%" //for rounded skeleton
  height={150}
  width={150}
/>
8. Spinner

import { Spinner } from 'next-gen-ui'

const App = () => {
    return(
       <Spinner size={50} />
    );
}

export default App;
Varients:

() => (
  <DarkBackground>
    <Spinner size={50} light />
  </DarkBackground>
)
8. Text Input

import { TextInput } from 'next-gen-ui'

const App = () => {
    return(
       <TextInput width="250px" />
    );
}

export default App;
Varients:

<TextInput placeholder="Placeholder" width="250px" />

<TextInput  error  placeholder="Wrong input" width="250px"/>

<TextInput disabled placeholder="Disabled" width="250px" />

<TextInput placeholder="Not editable" readonly width="250px" />
//with icon
<TextInput
    icon={() => {}}
    placeholder="Login"  width="250px"
/>
//Clearable
() => {
  const [value, setValue] = useState('');
  return (
    <TextInput
      placeholder='Type and clear'
      width='250px'
      value={value}
      onChange={e => setValue(e.currentTarget.value)}
      clearable
    />
  );
}
//Size
() => {
  return (
    <>
      <Row>
        <TextInput placeholder='large' size='large' />
        <TextInput placeholder='default' size='default' />
        <TextInput placeholder='small' size='small' />
      </Row>
    </>
  );
}

License

MIT License

Copyright (c) 2021 Next Gen UI Developers.

Permission is hereby granted, at affordable cost, to any person obtaining a copy
of this software and associated documentation files (the “Software”), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

Tech & Tools:

Front-end:









Back-end:





Design:


Backend as a Service (BaaS)



Version Control:

Package:

Developers

Ashish Kumar Mishra


  

Ankit Raj


  

Om Prakash


  

Shivam Sinha


  

Shubham Singh


  

GitHub

View Github