A comprehensive UI component library built with React, Material-UI, and TypeScript
A comprehensive, production-ready UI component library built with React, Material-UI, and TypeScript. Designed for rapid development with full type safety and customizable theming.
npm install ev-ui-lab
Ensure your project has the following peer dependencies:
npm install react react-dom @mui/material @mui/icons-material @emotion/react @emotion/styled sass
Minimum versions:
Import the component styles in your root layout or main app file:
For Next.js App Router (app/layout.tsx):
import "ev-ui-lab/styles.css";
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}
For Next.js Pages Router (pages/_app.tsx):
import "ev-ui-lab/styles.css";
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}
export default MyApp;
For Create React App (src/index.js or src/App.js):
import "ev-ui-lab/styles.css";
Now you can import and use components in any file:
import { TextInputField, Button, DatePicker } from "ev-ui-lab";
function App() {
const [email, setEmail] = React.useState("");
return (
<div>
<TextInputField
title="Email"
placeholder="Enter your email"
value={email}
value_update={(attr, value) => setEmail(value)}
/>
<Button
text="Submit"
className="primaryBtn"
size="medium"
onClick={() => console.log("Submitted")}
/>
</div>
);
}
Complete documentation is available in the docs/ folder:
Advanced text input with validation, password visibility toggle, and icon support.
import { TextInputField } from "ev-ui-lab";
import EmailIcon from "@mui/icons-material/Email";
<TextInputField
title="Email"
value={email}
attrName="email"
value_update={(attr, value) => setEmail(value)}
placeholder="Enter your email"
validation_type="ALPHANUMERIC"
required={true}
max_length={50}
warn_status={hasError}
error_message="Invalid email"
startIcon={<EmailIcon />}
disabled={false}
/>;
Props:
title (string): Label for the input fieldvalue (string): Current valueattrName (string): Attribute name passed to value_updatevalue_update (function): Callback (attrName, newValue) => voidvalidation_type (string): "NUMBER", "NAME", "ALPHANUMERIC", "PASSWORD", "ALL_CAPS", "ALPHANUMERIC_ALL", "NUMBER_WITH_DECIMAL", "ADDRESS"placeholder (string): Placeholder textrequired (boolean): Mark as requiredmax_length (number): Maximum character lengthwarn_status (boolean): Show error stateerror_message (string): Error message to displaydisabled (boolean): Disable inputstartIcon (ReactNode): Icon at start of inputendIcon (ReactNode): Icon at end of inputDropdown select with custom styling and icon support.
import { SelectInputField } from "ev-ui-lab";
const options = [
{ label: "Option 1", value: "opt1" },
{ label: "Option 2", value: "opt2" },
];
<SelectInputField
title="Select Country"
value={country}
attrName="country"
value_update={(attr, value) => setCountry(value)}
options={options}
placeholder="Choose a country"
required={true}
warn_status={hasError}
error_message="Please select a country"
/>;
Props:
title (string): Label for the selectvalue (string): Selected valueattrName (string): Attribute namevalue_update (function): Callback (attrName, newValue) => voidoptions (array): Array of { label: string, value: string }placeholder (string): Placeholder textstartIcon (ReactNode): Icon at startdisabled (boolean): Disable selectrequired (boolean): Mark as requiredwarn_status (boolean): Show error stateerror_message (string): Error messageCustom date picker with year, month, and day selection.
import { DatePicker } from "ev-ui-lab";
<DatePicker
label="Birth Date"
value={date}
onChange={(newDate) => setDate(newDate)}
format="DD-MM-YYYY"
minYear={1900}
maxYear={2030}
minDate={new Date("1900-01-01")}
maxDate={new Date()}
required={true}
warn_status={hasError}
error_message="Please select a date"
showTodayButton={true}
disabled={false}
/>;
Props:
label (string): Label for the date pickervalue (string | Date): Current date valueonChange (function): Callback (dateString | null) => voidformat (string): Date format - "DD-MM-YYYY", "MM-DD-YYYY", "YYYY-MM-DD", "DD/MM/YYYY"minYear (number): Minimum year (default: 1925)maxYear (number): Maximum year (default: current year + 10)minDate (Date): Minimum selectable datemaxDate (Date): Maximum selectable daterequired (boolean): Mark as requiredwarn_status (boolean): Show error stateerror_message (string): Error messageshowTodayButton (boolean): Show "Today" buttondisabled (boolean): Disable pickerFile upload component with drag-and-drop styling.
import { UploadFile } from "ev-ui-lab";
<UploadFile
label="Document"
file={selectedFile}
onChange={(e) => setSelectedFile(e.target.files?.[0] || null)}
onRemove={() => setSelectedFile(null)}
accept=".pdf,.doc,.docx"
info="PDF, DOC, DOCX only (Max 5MB)"
icon="/folder_icon.svg"
tickIcon="/success_icon.svg"
/>;
Props:
label (string): Label for the uploadfile (File | null): Selected fileonChange (function): File input change handleronRemove (function): Remove file handleraccept (string): Accepted file typesicon (string): Upload icon pathtickIcon (string): Success icon pathinfo (string): Info text below labelSearchable dropdown components for single and multiple selection.
import { SearchSelectDropdown, SearchMultipleSelectDropdown } from "ev-ui-lab";
// Single select
<SearchSelectDropdown
options={options}
value={selected}
onChange={setSelected}
placeholder="Search..."
/>
// Multiple select
<SearchMultipleSelectDropdown
options={options}
values={selectedItems}
onChange={setSelectedItems}
placeholder="Search and select..."
/>
Styled checkbox component.
import { Checkbox } from "ev-ui-lab";
<Checkbox
checked={isChecked}
onChange={(e) => setIsChecked(e.target.checked)}
label="I agree to terms"
/>;
Radio button components with different styling options.
import { RadioText, BorderRadioButton } from "ev-ui-lab";
<RadioText
value="option1"
selected={selectedOption === "option1"}
onChange={() => setSelectedOption("option1")}
label="Option 1"
/>
<BorderRadioButton
value="option2"
selected={selectedOption === "option2"}
onChange={() => setSelectedOption("option2")}
label="Option 2"
/>
Customizable button with loading state and icon support.
import { Button } from "ev-ui-lab";
import SendIcon from "@mui/icons-material/Send";
<Button
text="Submit"
className="primaryBtn"
size="medium"
onClick={handleSubmit}
loader={isLoading}
disabled={false}
fullWidth={true}
startIcon={<SendIcon />}
/>;
Props:
text (ReactNode): Button text or contentclassName (string): CSS class name for stylingsize (string): "xs", "small", "medium", "large", "xl"onClick (function): Click handlerloader (boolean): Show loading spinnerdisabled (boolean): Disable buttonfullWidth (boolean): Full width buttonstartIcon (ReactNode): Icon at startendIcon (ReactNode): Icon at endToggle switch components with different styling.
import { ToggleSwitch, Switch } from "ev-ui-lab";
<ToggleSwitch
checked={isEnabled}
onChange={(e) => setIsEnabled(e.target.checked)}
/>
<Switch
checked={isActive}
onChange={(e) => setIsActive(e.target.checked)}
/>
import React, { useState } from "react";
import {
TextInputField,
SelectInputField,
DatePicker,
Button,
UploadFile,
} from "ev-ui-lab";
function RegistrationForm() {
const [formData, setFormData] = useState({
name: "",
email: "",
country: "",
birthDate: "",
});
const [file, setFile] = useState<File | null>(null);
const [errors, setErrors] = useState({});
const handleInputChange = (field: string, value: string) => {
setFormData((prev) => ({ ...prev, [field]: value }));
};
const handleSubmit = () => {
console.log("Form submitted:", formData, file);
};
const countries = [
{ label: "United States", value: "us" },
{ label: "United Kingdom", value: "uk" },
{ label: "Canada", value: "ca" },
];
return (
<form>
<TextInputField
title="Full Name"
value={formData.name}
attrName="name"
value_update={handleInputChange}
validation_type="NAME"
required={true}
/>
<TextInputField
title="Email"
value={formData.email}
attrName="email"
value_update={handleInputChange}
placeholder="your@email.com"
required={true}
/>
<SelectInputField
title="Country"
value={formData.country}
attrName="country"
value_update={handleInputChange}
options={countries}
required={true}
/>
<DatePicker
label="Date of Birth"
value={formData.birthDate}
onChange={(date) => handleInputChange("birthDate", date || "")}
format="DD-MM-YYYY"
maxDate={new Date()}
/>
<UploadFile
label="ID Document"
file={file}
onChange={(e) => setFile(e.target.files?.[0] || null)}
onRemove={() => setFile(null)}
accept=".pdf,.jpg,.png"
/>
<Button
text="Register"
className="primaryBtn"
size="large"
onClick={handleSubmit}
fullWidth={true}
/>
</form>
);
}
This library includes a comprehensive set of production-ready components:
See all components with examples in the documentation below or check the GitHub repository for source code and examples.
Contributions are welcome! Please feel free to submit a Pull Request.
git checkout -b feature/amazing-feature)git commit -m 'Add some amazing feature')git push origin feature/amazing-feature)MIT © Evervent Team
Found a bug or have a feature request? Please open an issue on GitHub.
For questions and support, please visit our GitHub repository.
Built with ❤️ by the Evervent Team
FAQs
A comprehensive UI component library built with React, Material-UI, and TypeScript
We found that ev-ui-lab demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Open source is under attack because of how much value it creates. It has been the foundation of every major software innovation for the last three decades. This is not the time to walk away from it.
Security News
Socket CEO Feross Aboukhadijeh breaks down how North Korea hijacked Axios and what it means for the future of software supply chain security.
Security News
OpenSSF has issued a high-severity advisory warning open source developers of an active Slack-based campaign using impersonation to deliver malware.