epysa-ui

React UI component library: Field, Input, Select, FormFile, ShowInput, NavBar, Modal.

Install

npm install epysa-ui

Peer dependencies: react / react-dom >= 18.

Usage

Import the stylesheet once (e.g. in your app entry point):

import "epysa-ui/style.css";

import { Input, Select, FormFile, ShowInput, Field, NavBar, NavBarBrand, NavBarMenu, Modal, modalToggler } from "epysa-ui";

<Input label="Name" name="name" placeholder="Jane Doe" />

<Select label="Country" name="country">
  <option value="ar">Argentina</option>
  <option value="cl">Chile</option>
</Select>

<FormFile label="Attachment" name="file" />

<ShowInput heading="Status">Active</ShowInput>

<NavBar variant="primary">
  <NavBarBrand>My App</NavBarBrand>
  <NavBarMenu>{/* links */}</NavBarMenu>
</NavBar>

Field

Input and Select are built on top of Field, which handles the label, help/error text, and left/right icons or addons. You can also wrap custom controls directly:

<Field label="Custom" info="Helper text" alert={error}>
  <MyControl />
</Field>

Modal

Modals are controlled by name via modalToggler, or externally via the isActive / toggleModal props.

<button onClick={() => modalToggler("example")}>Open</button>

<Modal modalName="example" closeButton>
  <h2>Title</h2>
  <p>Content</p>
</Modal>

Smaller bundles: per-component imports

epysa-ui/style.css ships every component's CSS in one file. If you only use a few components, import each one's stylesheet instead so unused styles never reach the browser:

import "epysa-ui/base.css"; // shared reset + design tokens — always required
import "epysa-ui/modal/style.css";
import "epysa-ui/navbar/style.css";

import { Modal } from "epysa-ui/modal";
import { NavBar, NavBarBrand, NavBarMenu } from "epysa-ui/navbar";

Each component has a matching subpath: epysa-ui/field, epysa-ui/input, epysa-ui/select, epysa-ui/form-file, epysa-ui/show-input, epysa-ui/navbar, epysa-ui/modal (input and select share field/style.css, since both are built on Field). epysa-ui/base.css holds the shared resets and --epy-* tokens every component's CSS depends on, so it must be imported alongside whichever components you use.

Development

npm run build   # builds dist/ (ESM + CJS + types + CSS)
npm run clean   # removes dist/