Inclusify Design System

Inclusify Design System is a collection of accessible and reusable UI components designed to enhance web accessibility and inclusivity.

Useful Links

Storybook

https://royalharestudio.github.io/Inclusify-design-system/

NPM Package

https://www.npmjs.com/package/inclusify-design-system

🚀 Installation

npm install inclusify-design-system

or with Yarn:

yarn add inclusify-design-system

📖 Usage

Import and use components in your React project:

import { WSection } from 'inclusify-design-system';

function App() {
  return <WSection sectionLabelledById="sampleId" children={<div></div>} />;
}

export default App;

🎨 Components

Inclusify provides a variety of accessible UI components:

• Section – Keyboard and screen reader-friendly section wrapper.

More components are in development!

🌍 Accessibility Features

Inclusify ensures:

• WCAG-compliant color contrast.
• Proper ARIA roles and attributes.
• Keyboard navigability.
• Screen reader-friendly components.

🛠️ Development & Contribution

We welcome contributions! To set up the project locally:

git https://github.com/RoyalHareStudio/Inclusify-design-system.git
cd inclusify-design-system
npm install
npm run dev

Contributing

• Follow the accessibility-first development guidelines.
• Run tests before submitting PRs.
• Open issues for feature requests and bug reports.

📜 License

Inclusify Design System is licensed under the MIT License.

📫 Contact

For questions or support, reach out to Henry Le (Inclusify Design System developer) via GitHub Issues or email [[email protected]].