UnifyedX Storybook Component Library

0.2.288 verified Fri May 01 auth: no javascript

A modern, accessible React component library (v0.2.288) built with Storybook and Vite. It provides a collection of reusable, WCAG-compliant components including Buttons, Forms, Navigation, Overlays, and Date Pickers, styled with pure CSS. Published frequently via CI/CD, it integrates with Headless UI, Floating UI, Framer Motion, and Syncfusion (ej2) for advanced interactions, and expects React 18+, React Router, and React Toastify. Fully typed with JSDoc for TypeScript projects.

Common errors

error Module not found: Can't resolve 'unifyedx-storybook-new/style.css' ↓

cause Missing CSS import or incorrect path.

fix

Ensure you do: import 'unifyedx-storybook-new/style.css' (not under dist).

error Cannot find module '@syncfusion/ej2-react-grids' ↓

cause Missing Syncfusion peer dependency.

fix

Install it: npm i @syncfusion/ej2-react-grids@32.1.19

error React is not defined ↓

cause Missing React import in file using JSX when not using automatic runtime.

fix

Add import React from 'react'; at top of file or enable jsx-runtime.

error Attempted import error: 'Button' is not exported from 'unifyedx-storybook-new' ↓

cause Using default import instead of named import.

fix

Use import { Button } from 'unifyedx-storybook-new' instead of import Button from ...

Warnings

breaking Peer dependency @syncfusion/ej2-react-grids:32.1.19 etc. must be exactly that version; mismatches cause runtime errors. ↓

fix Install exact versions: npm i @syncfusion/ej2-base@32.1.19 @syncfusion/ej2-react-base@32.1.19 @syncfusion/ej2-react-grids@32.1.19 @syncfusion/ej2-react-inputs@32.1.19 @syncfusion/ej2-react-splitbuttons@32.1.19

breaking React 18+ required. React 17 or below will break. ↓

fix Upgrade to React 18 or 19: npm install react@18 react-dom@18

gotcha CSS must be explicitly imported; components have no style otherwise. ↓

fix Add import 'unifyedx-storybook-new/style.css' at your app entry point.

deprecated Some components may rely on Syncfusion ej2 which has commercial licensing. ↓

fix Review your use case; evaluate if Syncfusion components require a license.

gotcha Subpath imports (e.g., 'unifyedx-storybook-new/Button') are not documented; always import from the main entry. ↓

fix Use import { Button } from 'unifyedx-storybook-new' instead.

Install

npm install unifyedx-storybook-new

yarn add unifyedx-storybook-new

pnpm add unifyedx-storybook-new

Imports

Button

wrong

const Button = require('unifyedx-storybook-new').Button

correct

import { Button } from 'unifyedx-storybook-new'

ESM-only; CJS require not supported in this version. Named export.

Modal

wrong

import Modal from 'unifyedx-storybook-new'

correct

import { Modal } from 'unifyedx-storybook-new'

Default export does not exist; must use named import.

style.css

wrong

import 'unifyedx-storybook-new/dist/style.css'

correct

import 'unifyedx-storybook-new/style.css'

CSS file path is unifyedx-storybook-new/style.css, not under dist.

Breadcrumbs

wrong

import { Breadcrumbs } from 'unifyedx-storybook-new/Breadcrumbs'

correct

import { Breadcrumbs } from 'unifyedx-storybook-new'

Components are barrel-exported from the main package; subpath imports may not be available.

Quickstart

Demonstrates importing Button, Modal, Input and CSS, and using them in a React component with state.

import React from 'react';
import { Button, Modal, Input } from 'unifyedx-storybook-new';
import 'unifyedx-storybook-new/style.css';

function App() {
  const [isOpen, setIsOpen] = React.useState(false);
  const [value, setValue] = React.useState('');
  return (
    <div>
      <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
      <Modal open={isOpen} onClose={() => setIsOpen(false)} title='Example'>
        <Input value={value} onChange={e => setValue(e.target.value)} placeholder='Type here'/>
      </Modal>
    </div>
  );
}

export default App;