Next-gen-ui NPM

Logo

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.

Usage

Navbars
Footers
Forms
Cards
Hero Sections
Buttons
FAQs
404

button
Form Control
Link
Login
Search
Select
Skeleton
Spinner Loader
TextInput

$ npm i 'next-gen-ui'

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

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

export default App;

<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>

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;

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>
    )
}

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

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

export default App;

<Link as="span" href="#">I am span</Link>
<Link disabled href="#">

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

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

export default App;

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;

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;

//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>
  );
}

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

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

export default App;

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

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

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

export default App;

() => (
  <DarkBackground>
    <Spinner size={50} light />
  </DarkBackground>
)

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

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

export default App;

<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

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.