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
The npm package ev-ui-lab receives a total of 5 weekly downloads. As such, ev-ui-lab popularity was classified as not popular.
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
NIST will stop enriching most CVEs under a new risk-based model, narrowing the NVD's scope as vulnerability submissions continue to surge.
Company News
/Security News
Socket is an initial recipient of OpenAI's Cybersecurity Grant Program, which commits $10M in API credits to defenders securing open source software.
Security News
Socket CEO Feross Aboukhadijeh joins 10 Minutes or Less, a podcast by Ali Rohde, to discuss the recent surge in open source supply chain attacks.