https://github.com/arcaneharestudio/inclusify-design-system
The Inclusify Design System that focuses on reusable and accessible components for a web application (desktop and mobile)
https://github.com/arcaneharestudio/inclusify-design-system
a11y a11y-react accessibility playwright reactjs typescript
Last synced: 4 months ago
JSON representation
The Inclusify Design System that focuses on reusable and accessible components for a web application (desktop and mobile)
- Host: GitHub
- URL: https://github.com/arcaneharestudio/inclusify-design-system
- Owner: ArcaneHareStudio
- License: mit
- Created: 2025-02-17T22:55:08.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-10T15:43:59.000Z (over 1 year ago)
- Last Synced: 2025-07-15T21:46:32.856Z (12 months ago)
- Topics: a11y, a11y-react, accessibility, playwright, reactjs, typescript
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/inclusify-design-system
- Size: 4.57 MB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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
```sh
npm install inclusify-design-system
```
or with Yarn:
```sh
yarn add inclusify-design-system
```
## 📖 Usage
Import and use components in your React project:
```tsx
import { WSection } from 'inclusify-design-system';
function App() {
return } />;
}
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:
```sh
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 [royalharestudio@gmail.com].