Introducing React Nex Elements
Building Elements for the Web
Elegantly designed. Easily integrate into your applications. Open Source.
authentication-1
Create an account
Enter your email below to create your account
OR CONTINUE WITH
Email
Password
import React, { useState } from 'react'
import { Card, CardHeader, CardDescription, CardBody, CardFooter } from '../../../components/Card/CardComponets'
import Input from "../../../components/Input/Input";
import Button from "../../../components/Button/Button";
import { FaGithub, FaGoogle } from 'react-icons/fa';
const Authentication_1 = () => {
const [formState, setFormState] = useState({ email: '', password: '' });
const handleInputChange = (e) => {
const { name, value } = e.target;
setFormState((prevState) => ({
...prevState,
[name]: value,
}));
};
const handleCreateAccount = () => {
// Handle account creation logic here
console.log("Creating account with:", formState.email, formState.password);
};
return (
<div className="flex items-center justify-center">
<Card className="max-w-sm w-full">
<CardHeader>
<h1 className="text-2xl font-bold text-black dark:text-white">Create an account</h1>
<CardDescription className="text-gray-600 dark:text-gray-400">
Enter your email below to create your account
</CardDescription>
</CardHeader>
<CardBody>
<div className="flex gap-2">
<Button className="flex-1 flex items-center justify-center gap-2 border-2 border-gray-300 dark:border-[#383838] dark:hover:bg-[#1C1C1B]">
<FaGithub size={20} className='fill-black dark:fill-white' /> Github
</Button>
<Button className="flex-1 flex items-center justify-center gap-2 border-2 border-gray-300 dark:border-[#383838] dark:hover:bg-[#1C1C1B]">
<FaGoogle size={20} className='fill-black dark:fill-white' /> Google
</Button>
</div>
<div className="flex items-center mt-2">
<div className="flex-grow border-t border-gray-300 dark:border-[#383838]"></div>
<span className="px-2 text-xs text-gray-600 dark:text-gray-400">OR CONTINUE WITH</span>
<div className="flex-grow border-t border-gray-300 dark:border-[#383838]"></div>
</div>
<div className="flex flex-col gap-2">
<span className="text-md font-medium text-left">Email</span>
<Input
type="email"
placeholder="j@example.com"
className='!bg-transparent !dark:bg-transparent rounded-md h-9'
name="email"
value={formState.email}
onChange={handleInputChange}
/>
</div>
<div className="flex flex-col gap-2">
<span className="text-md font-medium text-left">Password</span>
<Input
type="password"
placeholder="Password"
className='!bg-transparent !dark:bg-transparent rounded-md h-9'
name="password"
value={formState.password}
onChange={handleInputChange}
/>
</div>
</CardBody>
<CardFooter className="pt-3">
<Button className="w-full bg-black text-white dark:bg-white dark:text-black" onClick={handleCreateAccount}>
Create account
</Button>
</CardFooter>
</Card>
</div>
)
}
export default Authentication_1authentication-2
Create an account
Enter your details below to create your account
Username
Email
Password
Confirm Password
import React, { useState } from 'react';
import { Card, CardHeader, CardDescription, CardBody, CardFooter } from '../../../components/Card/CardComponets';
import Input from "../../../components/Input/Input";
import Button from "../../../components/Button/Button";
import { FaGithub, FaGoogle } from 'react-icons/fa';
const Authentication_2 = () => {
const [formState, setFormState] = useState({ username: '', email: '', password: '', confirmPassword: '' });
const [errors, setErrors] = useState({});
const handleInputChange = (e) => {
const { name, value } = e.target;
setFormState((prevState) => ({
...prevState,
[name]: value,
}));
// Clear the error for the field being updated
setErrors((prevErrors) => ({
...prevErrors,
[name]: '',
}));
};
const validateForm = () => {
const newErrors = {};
if (!formState.username) newErrors.username = 'Username is required';
if (!formState.email) newErrors.email = 'Email is required';
if (!formState.password) newErrors.password = 'Password is required';
if (formState.password !== formState.confirmPassword) newErrors.confirmPassword = 'Passwords do not match';
return newErrors;
};
const handleCreateAccount = () => {
const newErrors = validateForm();
if (Object.keys(newErrors).length > 0) {
setErrors(newErrors);
} else {
setErrors({});
// Handle account creation logic here
console.log("Creating account with:", formState);
}
};
return (
<div className="flex items-center justify-center">
<Card className="max-w-sm w-full">
<CardHeader>
<h1 className="text-2xl font-bold text-black dark:text-white">Create an account</h1>
<CardDescription className="text-gray-600 dark:text-gray-400">
Enter your details below to create your account
</CardDescription>
</CardHeader>
<CardBody>
<div className="flex flex-col gap-2">
<span className="text-md font-medium text-left">Username</span>
<Input
type="text"
placeholder="Username"
className='!bg-transparent !dark:bg-transparent rounded-md h-9'
name="username"
value={formState.username}
onChange={handleInputChange}
/>
{errors.username && <span className="text-red-500 text-sm">{errors.username}</span>}
</div>
<div className="flex flex-col gap-2">
<span className="text-md font-medium text-left">Email</span>
<Input
type="email"
placeholder="j@example.com"
className='!bg-transparent !dark:bg-transparent rounded-md h-9'
name="email"
value={formState.email}
onChange={handleInputChange}
/>
{errors.email && <span className="text-red-500 text-sm">{errors.email}</span>}
</div>
<div className="flex flex-col gap-2">
<span className="text-md font-medium text-left">Password</span>
<Input
type="password"
placeholder="Password"
className='!bg-transparent !dark:bg-transparent rounded-md h-9'
name="password"
value={formState.password}
onChange={handleInputChange}
/>
{errors.password && <span className="text-red-500 text-sm">{errors.password}</span>}
</div>
<div className="flex flex-col gap-2">
<span className="text-md font-medium text-left">Confirm Password</span>
<Input
type="password"
placeholder="Confirm Password"
className='!bg-transparent !dark:bg-transparent rounded-md h-9'
name="confirmPassword"
value={formState.confirmPassword}
onChange={handleInputChange}
/>
{errors.confirmPassword && <span className="text-red-500 text-sm">{errors.confirmPassword}</span>}
</div>
</CardBody>
<CardFooter className="pt-3">
<Button className="w-full bg-black text-white dark:bg-white dark:text-black" onClick={handleCreateAccount}>
Create account
</Button>
</CardFooter>
</Card>
</div>
);
};
export default Authentication_2;authentication-3
Sign Up
Enter your information to create an account
First name
Last name
Email
Password
Already have an account? Sign in
import React, { useState } from 'react'
import { Card, CardHeader, CardDescription, CardBody, CardFooter } from '../../../components/Card/CardComponets'
import Input from "../../../components/Input/Input";
import Button from "../../../components/Button/Button";
import Link from 'next/link';
const Authentication_3 = () => {
const [formState, setFormState] = useState({ firstName: '', lastName: '', email: '', password: '' });
const [errors, setErrors] = useState({});
const handleInputChange = (e) => {
const { name, value } = e.target;
setFormState((prevState) => ({
...prevState,
[name]: value,
}));
// Clear the error for the field being updated
setErrors((prevErrors) => ({
...prevErrors,
[name]: '',
}));
};
const validateForm = () => {
const newErrors = {};
if (!formState.firstName) newErrors.firstName = 'First name is required';
if (!formState.lastName) newErrors.lastName = 'Last name is required';
if (!formState.email) newErrors.email = 'Email is required';
if (!formState.password) newErrors.password = 'Password is required';
return newErrors;
};
const handleCreateAccount = () => {
const newErrors = validateForm();
if (Object.keys(newErrors).length > 0) {
setErrors(newErrors);
} else {
setErrors({});
// Handle account creation logic here
console.log("Creating account with:", formState);
}
};
return (
<div className="flex items-center justify-center">
<Card className="max-w-sm w-full ">
<CardHeader className='!mb-2'>
<h1 className="text-2xl font-bold text-black dark:text-white">Sign Up</h1>
<CardDescription className="text-gray-600 dark:text-gray-400">
Enter your information to create an account
</CardDescription>
</CardHeader>
<CardBody className='!gap-2'>
<div className="flex flex-row items-center gap-3">
<div className="flex flex-col w-[48%] gap-2">
<span className="text-md font-medium text-left">First name</span>
<Input
type="text"
placeholder="John"
className='!bg-transparent !dark:bg-transparent rounded-md h-9'
name="firstName"
value={formState.firstName}
onChange={handleInputChange}
/>
{errors.firstName && <span className="text-red-500 text-sm">{errors.firstName}</span>}
</div>
<div className="flex flex-col w-[48%] gap-2">
<span className="text-md font-medium text-left">Last name</span>
<Input
type="text"
placeholder="Doe"
className='!bg-transparent !dark:bg-transparent rounded-md h-9'
name="lastName"
value={formState.lastName}
onChange={handleInputChange}
/>
{errors.lastName && <span className="text-red-500 text-sm">{errors.lastName}</span>}
</div>
</div>
<div className="flex flex-col gap-2">
<span className="text-md font-medium text-left">Email</span>
<Input
type="email"
placeholder="j@example.com"
className='!bg-transparent !dark:bg-transparent rounded-md h-9'
name="email"
value={formState.email}
onChange={handleInputChange}
/>
{errors.email && <span className="text-red-500 text-sm">{errors.email}</span>}
</div>
<div className="flex flex-col gap-2">
<span className="text-md font-medium text-left">Password</span>
<Input
type="password"
placeholder="Password"
className='!bg-transparent !dark:bg-transparent rounded-md h-9'
name="password"
value={formState.password}
onChange={handleInputChange}
/>
{errors.password && <span className="text-red-500 text-sm">{errors.password}</span>}
</div>
</CardBody>
<CardFooter className="flex flex-col gap-2">
<div className="flex flex-col gap-4">
<Button className="w-full bg-black text-white dark:bg-white dark:text-black" onClick={handleCreateAccount}>
Create account
</Button>
<Button className="w-full flex items-center justify-center gap-2 border-2 border-gray-300 dark:border-[#383838] dark:hover:bg-[#1C1C1B]">
Sign up with GitHub
</Button>
</div>
<div className="mt-2 text-center">
<span className="text-sm text-gray-600 dark:text-gray-400">Already have an account? </span>
<Link href="/" className="text-sm text-blue-500 dark:text-blue-400 hover:underline">Sign in</Link>
</div>
</CardFooter>
</Card>
</div>
)
}
export default Authentication_3;authentication-4
Login
Enter your email and password to Login
Email
PasswordForgot password?
Don't have an account? Sign up
import React, { useState } from 'react'
import { Card, CardHeader, CardDescription, CardBody, CardFooter } from '../../../components/Card/CardComponets'
import Input from "../../../components/Input/Input";
import Button from "../../../components/Button/Button";
import { FaGithub } from 'react-icons/fa';
import Link from 'next/link';
const Authentication_4 = () => {
const [formState, setFormState] = useState({ email: '', password: '' });
const [errors, setErrors] = useState({});
const handleInputChange = (e) => {
const { name, value } = e.target;
setFormState((prevState) => ({
...prevState,
[name]: value,
}));
// Clear the error for the field being updated
setErrors((prevErrors) => ({
...prevErrors,
[name]: '',
}));
};
const validateForm = () => {
const newErrors = {};
if (!formState.email) newErrors.email = 'Email is required';
if (!formState.password) newErrors.password = 'Password is required';
return newErrors;
};
const handleLogin = () => {
const newErrors = validateForm();
if (Object.keys(newErrors).length > 0) {
setErrors(newErrors);
} else {
setErrors({});
// Handle login logic here
console.log("Logging in with:", formState);
}
};
return (
<div className="flex items-center justify-center">
<Card className="max-w-sm w-full">
<CardHeader className='!mb-2'>
<h1 className="text-2xl font-bold text-black dark:text-white">Login</h1>
<CardDescription className="text-gray-600 dark:text-gray-400">
Enter your email and password to Login
</CardDescription>
</CardHeader>
<CardBody>
<div className="flex flex-col gap-2">
<span className="text-md font-medium text-left">Email</span>
<Input
type="email"
placeholder="j@example.com"
className='!bg-transparent !dark:bg-transparent rounded-md h-9'
name="email"
value={formState.email}
onChange={handleInputChange}
/>
{errors.email && <span className="text-red-500 text-sm">{errors.email}</span>}
</div>
<div className="flex flex-col gap-2">
<div className="flex justify-between items-center">
<span className="text-md font-medium text-left">Password</span>
<Link href="#" className="text-sm text-blue-500 dark:text-blue-400 hover:underline">Forgot password?</Link>
</div>
<Input
type="password"
placeholder="Password"
className='!bg-transparent !dark:bg-transparent rounded-md h-9'
name="password"
value={formState.password}
onChange={handleInputChange}
/>
{errors.password && <span className="text-red-500 text-sm">{errors.password}</span>}
</div>
</CardBody>
<CardFooter className="flex flex-col gap-2">
<div className="flex flex-col gap-4">
<Button className="w-full bg-black text-white dark:bg-white dark:text-black" onClick={handleLogin}>
Login
</Button>
</div>
<div className="mt-2 text-center">
<span className="text-sm text-gray-600 dark:text-gray-400">Don't have an account? </span>
<Link href="/" className="text-sm text-blue-500 dark:text-blue-400 hover:underline">Sign up</Link>
</div>
</CardFooter>
</Card>
</div>
)
}
export default Authentication_4;authentication-5
TechCorp
Sign in
Enter your email below to login
Email
Password
import React, { useState } from 'react'
import { Card, CardHeader, CardDescription, CardBody, CardFooter } from '../../../components/Card/CardComponets'
import Input from "../../../components/Input/Input";
import Button from "../../../components/Button/Button";
import { FaGithub, FaGoogle } from 'react-icons/fa';
const Authentication_5 = () => {
const [formState, setFormState] = useState({ email: '', password: '' });
const [errors, setErrors] = useState({});
const handleInputChange = (e) => {
const { name, value } = e.target;
setFormState((prevState) => ({
...prevState,
[name]: value,
}));
// Clear the error for the field being updated
setErrors((prevErrors) => ({
...prevErrors,
[name]: '',
}));
};
const validateForm = () => {
const newErrors = {};
if (!formState.email) newErrors.email = 'Email is required';
if (!formState.password) newErrors.password = 'Password is required';
return newErrors;
};
const handleCreateAccount = () => {
const newErrors = validateForm();
if (Object.keys(newErrors).length > 0) {
setErrors(newErrors);
} else {
setErrors({});
// Handle account creation logic here
console.log("Creating account with:", formState);
}
};
return (
<div className="flex items-center justify-center h-screen">
<Card className="max-w-sm w-full">
<div className="flex flex-row pb-4 items-center gap-2">
<img src='https://seeklogo.com/images/M/microsoft-365-copilot-logo-44BA459F18-seeklogo.com.png' className="h-8 w-auto" />
<h2 className="text-xl font-bold text-black dark:text-white">TechCorp</h2>
</div>
<CardHeader className='!mb-2'>
<h1 className="text-xl font-bold text-black dark:text-white">Sign in</h1>
<CardDescription className="text-gray-600 dark:text-gray-400">
Enter your email below to login
</CardDescription>
</CardHeader>
<CardBody>
<div className="flex flex-col gap-2">
<span className="text-md font-medium text-left">Email</span>
<Input
type="email"
placeholder="j@example.com"
className='!bg-transparent !dark:bg-transparent rounded-md h-9'
name="email"
value={formState.email}
onChange={handleInputChange}
/>
{errors.email && <span className="text-red-500 text-sm">{errors.email}</span>}
</div>
<div className="flex flex-col gap-2">
<span className="text-md font-medium text-left">Password</span>
<Input
type="password"
placeholder="Password"
className='!bg-transparent !dark:bg-transparent rounded-md h-9'
name="password"
value={formState.password}
onChange={handleInputChange}
/>
{errors.password && <span className="text-red-500 text-sm">{errors.password}</span>}
</div>
</CardBody>
<CardFooter className="pt-3">
<Button className="w-full bg-black text-white dark:bg-white dark:text-black" onClick={handleCreateAccount}>
Sign in
</Button>
</CardFooter>
</Card>
</div>
)
}
export default Authentication_5Call to Actions
Comming Soon...
carousel-1
import React from 'react'
import { motion } from 'framer-motion'
import acme from '../../assets/acme.svg'
import apex from '../../assets/apex.svg'
import celestia from '../../assets/celestia.svg'
import echo from '../../assets/echo.svg'
import pulse from '../../assets/pulse.svg'
import quantum from '../../assets/quantum.svg'
import Image from 'next/image'
const logos = [
{ src: acme, alt: 'Acme Logo' },
{ src: apex, alt: 'Apex Logo' },
{ src: quantum, alt: 'Quantum.svg Logo' },
{ src: celestia, alt: 'Celestia Logo' },
{ src: echo, alt: 'Eco Logo' },
{ src: pulse, alt: 'Pulse Logo' },
]
const Carousel_1 = () => {
return (
<div className="flex overflow-hidden before:content-[''] after:content-[''] before:absolute after:absolute relative before:h-full after:h-full before:w-5 after:w-5 after:right-0 before:left-0 before:top-0 after:top-0 before:bg-[linear_gradient(to_right,#000,rgb(0,0,0,0))] after:bg-[linear_gradient(to_left,#000,rgb(0,0,0,0))]">
<motion.div
transition={{
duration: 15,
ease: 'linear',
repeat: Infinity
}}
initial={{ translateX: '0%' }}
animate={{ translateX: '-50%' }}
className='flex flex-none gap-16 pr-16'>
{
logos.map(({ src, alt }) => (
<Image src={src} alt={alt} className='flex-none h-8 w-auto' />
))
}
{
logos.map(({ src, alt }) => (
<Image src={src} alt={alt} className='flex-none h-8 w-auto' />
))
}
</motion.div>
</div>
)
}
export default Carousel_1dashboard-1
TechPro
Open
Home
Overview
Messages
Analytics
Notifications
Profile
Home
Overview
Messages
Analytics
Notifications
Total Revenue
$45,231.89
+20.1% from last month
Subscriptions
+2350
+180.1% from last month
Sales
+12,234
+19% from last month
Active Now
+573
+201 since last hour
Recent Sales
You make +200 sales in this week
Sofia Davis
sofia.davis@example.com
-$100
Jackson Lee
jackson.lee@example.com
+$1500
Olivia Brown
olivia.brown@example.com
+$2000
Liam Smith
liam.smith@example.com
-$500
Emma Wilson
emma.wilson@example.com
+$1700
Noah Johnson
noah.johnson@example.com
+$1800
Ava Martinez
ava.martinez@example.com
-$300
William Garcia
william.garcia@example.com
+$1100
Team Members
Invite your team members to collaborate.
Sofia Davis
m@example.com
Jackson Lee
p@example.com
dashboard-2
TechPro
Open
Home
Overview
Messages
Analytics
Notifications
Profile
Home
Overview
Messages
Analytics
Notifications
Total Revenue
$45,231.89
+20.1% from last month
Subscriptions
+2350
+180.1% from last month
Sales
+12,234
+19% from last month
Active Now
+573
+201 since last hour
Sales Bar Chart
Revenue Line Chart
Distribution Pie Chart
FAQ-1
Frequently Asked Questions
Our return policy allows returns within 30 days of purchase. Items must be in original condition and packaging.
Shipping usually takes 5-7 business days within the continental US. International shipping may vary.
Yes, we offer 24/7 customer support through our support portal. You can also reach us via email or phone during business hours.
Yes, once your order is shipped, you will receive a tracking number via email.
import React from 'react';
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '../../components/Accordion/Accordion';
const Faq_1 = () => {
return (
<div className="faq-section p-4">
<h2 className="text-2xl font-bold mb-4 dark:text-white">Frequently Asked Questions</h2>
<Accordion type="single">
<AccordionItem>
<AccordionTrigger value="q1">
What is your return policy?
</AccordionTrigger>
<AccordionContent value="q1">
<p>
Our return policy allows returns within 30 days of purchase. Items must be in original condition and packaging.
</p>
</AccordionContent>
</AccordionItem>
<AccordionItem>
<AccordionTrigger value="q2">
How long does shipping take?
</AccordionTrigger>
<AccordionContent value="q2">
<p>
Shipping usually takes 5-7 business days within the continental US. International shipping may vary.
</p>
</AccordionContent>
</AccordionItem>
<AccordionItem>
<AccordionTrigger value="q3">
Do you offer customer support?
</AccordionTrigger>
<AccordionContent value="q3">
<p>
Yes, we offer 24/7 customer support through our support portal. You can also reach us via email or phone during business hours.
</p>
</AccordionContent>
</AccordionItem>
<AccordionItem>
<AccordionTrigger value="q4">
Can I track my order?
</AccordionTrigger>
<AccordionContent value="q4">
<p>
Yes, once your order is shipped, you will receive a tracking number via email.
</p>
</AccordionContent>
</AccordionItem>
</Accordion>
</div>
);
};
export default Faq_1;FAQ-2
FAQ
Start with our free plan and switch to premium as you grow. Best value for individuals and small businesses.
Creating an account is simple. Click on the "Sign Up" button on the top right corner of the homepage, fill in the required details, and submit the form.
We accept various payment methods including credit/debit cards, PayPal, and Apple Pay. More options may be available depending on your location.
After placing an order, you will receive a confirmation email with a tracking number. You can use this number to track your order on our website or the carrier's site.
You can contact our customer service via email at support@example.com or call us at (123) 456-7890. Our support team is available 24/7.
import React from 'react';
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '../../components/Accordion/Accordion';
const Faq_2 = () => {
return (
<div className="faq-section-2 p-0 md:p-6 rounded-lg shadow-md">
<div className='flex flex-col gap-2 items-center'>
<h2 className="text-3xl md:text-4xl lg:text-5xl font-extrabold text-center dark:text-white">FAQ</h2>
<p className="text-center text-base md:text-lg lg:text-lg mb-6 max-w-[500px] text-gray-700 dark:text-gray-300">
Start with our free plan and switch to premium as you grow. Best value for individuals and small businesses.
</p>
</div>
<Accordion type="single">
<AccordionItem>
<AccordionTrigger value="q1">
How do I create an account?
</AccordionTrigger>
<AccordionContent value="q1">
<p>
Creating an account is simple. Click on the "Sign Up" button on the top right corner of the homepage, fill in the required details, and submit the form.
</p>
</AccordionContent>
</AccordionItem>
<AccordionItem>
<AccordionTrigger value="q2">
What payment methods do you accept?
</AccordionTrigger>
<AccordionContent value="q2">
<p>
We accept various payment methods including credit/debit cards, PayPal, and Apple Pay. More options may be available depending on your location.
</p>
</AccordionContent>
</AccordionItem>
<AccordionItem>
<AccordionTrigger value="q3">
How do I track my order status?
</AccordionTrigger>
<AccordionContent value="q3">
<p>
After placing an order, you will receive a confirmation email with a tracking number. You can use this number to track your order on our website or the carrier's site.
</p>
</AccordionContent>
</AccordionItem>
<AccordionItem>
<AccordionTrigger value="q4">
How can I contact customer service?
</AccordionTrigger>
<AccordionContent value="q4">
<p>
You can contact our customer service via email at support@example.com or call us at (123) 456-7890. Our support team is available 24/7.
</p>
</AccordionContent>
</AccordionItem>
</Accordion>
</div>
);
};
export default Faq_2;Hero Sections
Comming Soon..
Testimonials
Comming Soon...