{"id":26569,"library":"unifyedx-storybook-new","title":"UnifyedX Storybook Component Library","description":"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.","status":"active","version":"0.2.288","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","react","storybook","component-library","vite","ui","accessible"],"install":[{"cmd":"npm install unifyedx-storybook-new","lang":"bash","label":"npm"},{"cmd":"yarn add unifyedx-storybook-new","lang":"bash","label":"yarn"},{"cmd":"pnpm add unifyedx-storybook-new","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"React >=18 required as peer dependency","package":"react","optional":false},{"reason":"DOM rendering peer dependency","package":"react-dom","optional":false},{"reason":"Required for navigation components like Breadcrumbs and Sidebar","package":"react-router-dom","optional":false},{"reason":"Accessible primitive components (Modal, Tooltip, etc.)","package":"@headlessui/react","optional":false},{"reason":"Animation library for transitions","package":"framer-motion","optional":false},{"reason":"Floating UI positioning for Tooltip, Popover","package":"@floating-ui/react","optional":false},{"reason":"Toast notification system (v10)","package":"react-toastify","optional":false},{"reason":"Utility functions (debounce, etc.)","package":"lodash","optional":false},{"reason":"Syncfusion base for ej2 components (grids, inputs, etc.)","package":"@syncfusion/ej2-base","optional":false},{"reason":"Syncfusion React wrapper for ej2","package":"@syncfusion/ej2-react-base","optional":false},{"reason":"Data grid component","package":"@syncfusion/ej2-react-grids","optional":false},{"reason":"Syncfusion input components","package":"@syncfusion/ej2-react-inputs","optional":false},{"reason":"Split button components","package":"@syncfusion/ej2-react-splitbuttons","optional":false}],"imports":[{"note":"ESM-only; CJS require not supported in this version. Named export.","wrong":"const Button = require('unifyedx-storybook-new').Button","symbol":"Button","correct":"import { Button } from 'unifyedx-storybook-new'"},{"note":"Default export does not exist; must use named import.","wrong":"import Modal from 'unifyedx-storybook-new'","symbol":"Modal","correct":"import { Modal } from 'unifyedx-storybook-new'"},{"note":"CSS file path is unifyedx-storybook-new/style.css, not under dist.","wrong":"import 'unifyedx-storybook-new/dist/style.css'","symbol":"style.css","correct":"import 'unifyedx-storybook-new/style.css'"},{"note":"Components are barrel-exported from the main package; subpath imports may not be available.","wrong":"import { Breadcrumbs } from 'unifyedx-storybook-new/Breadcrumbs'","symbol":"Breadcrumbs","correct":"import { Breadcrumbs } from 'unifyedx-storybook-new'"}],"quickstart":{"code":"import React from 'react';\nimport { Button, Modal, Input } from 'unifyedx-storybook-new';\nimport 'unifyedx-storybook-new/style.css';\n\nfunction App() {\n  const [isOpen, setIsOpen] = React.useState(false);\n  const [value, setValue] = React.useState('');\n  return (\n    <div>\n      <Button onClick={() => setIsOpen(true)}>Open Modal</Button>\n      <Modal open={isOpen} onClose={() => setIsOpen(false)} title='Example'>\n        <Input value={value} onChange={e => setValue(e.target.value)} placeholder='Type here'/>\n      </Modal>\n    </div>\n  );\n}\n\nexport default App;","lang":"typescript","description":"Demonstrates importing Button, Modal, Input and CSS, and using them in a React component with state."},"warnings":[{"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","message":"Peer dependency @syncfusion/ej2-react-grids:32.1.19 etc. must be exactly that version; mismatches cause runtime errors.","severity":"breaking","affected_versions":">=0.0.0"},{"fix":"Upgrade to React 18 or 19: npm install react@18 react-dom@18","message":"React 18+ required. React 17 or below will break.","severity":"breaking","affected_versions":">=0.0.0"},{"fix":"Add import 'unifyedx-storybook-new/style.css' at your app entry point.","message":"CSS must be explicitly imported; components have no style otherwise.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Review your use case; evaluate if Syncfusion components require a license.","message":"Some components may rely on Syncfusion ej2 which has commercial licensing.","severity":"deprecated","affected_versions":">=0.0.0"},{"fix":"Use import { Button } from 'unifyedx-storybook-new' instead.","message":"Subpath imports (e.g., 'unifyedx-storybook-new/Button') are not documented; always import from the main entry.","severity":"gotcha","affected_versions":">=0.0.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Ensure you do: import 'unifyedx-storybook-new/style.css' (not under dist).","cause":"Missing CSS import or incorrect path.","error":"Module not found: Can't resolve 'unifyedx-storybook-new/style.css'"},{"fix":"Install it: npm i @syncfusion/ej2-react-grids@32.1.19","cause":"Missing Syncfusion peer dependency.","error":"Cannot find module '@syncfusion/ej2-react-grids'"},{"fix":"Add import React from 'react'; at top of file or enable jsx-runtime.","cause":"Missing React import in file using JSX when not using automatic runtime.","error":"React is not defined"},{"fix":"Use import { Button } from 'unifyedx-storybook-new' instead of import Button from ...","cause":"Using default import instead of named import.","error":"Attempted import error: 'Button' is not exported from 'unifyedx-storybook-new'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}