In a world of chaos, a well-designed shelter is our refuge.
Welcome to ShelterUI, where everything is well stashed away.
ShelterUI is a modular and scalable design system built to streamline UI development and ensure consistency across projects.
Designed with modern front-end practices in mind, it provides reusable components, well-structured styles, and flexible theming options.
This repository serves as both a sandbox for UX/UI experimentation and a practical foundation for my future projects.
The primary goal behind ShelterUI is to explore, refine, and document UX/UI practices while overcoming common design system challenges.
As a front-end developer specializing in React, I wanted a structured and maintainable tool that aligns with modern development workflows.
This project is not only an exercise in technical proficiency but also a learning hub for accessibility, scalability, and component-driven architecture.
Whether applied to real-world projects or simply used as an evolving reference, ShelterUI allows rapid prototyping without sacrificing quality.
ShelterUI is divided into multiple packages to provide modularity and flexibility in UI development.
| Package Name | Version | Documentation | Description |
|---|---|---|---|
@pplancq/shelter-ui-react |
 |
README | A React component library for UI development. |
@pplancq/shelter-ui-css |
 |
README | Provides predefined styles and theme variables for ShelterUI. |
@pplancq/shelter-ui-icon |
 |
README | Contains scalable SVG assets for UI icons. |
For version updates and detailed changes, see the CHANGELOG.md.
ShelterUI features interactive documentation powered by Storybook, allowing developers to explore and test components in isolation.
ShelterUI is structured as multiple packages, allowing flexible integration based on your needs.
npm install @pplancq/shelter-ui-react @pplancq/shelter-ui-icon @pplancq/shelter-ui-cssThe React package (@pplancq/shelter-ui-react) is designed to work independently, which means it does not include default styles.
If you choose to use it without the @pplancq/shelter-ui-css package, you'll need to implement the styling manually.
For a smoother experience with ready-to-use, predefined styles and theme tokens, it is recommended to install @pplancq/shelter-ui-css.
For details on how the default styles are applied in practice, please refer to our Storybook documentation.
import "@pplancq/shelter-ui-css/css/shelter-ui.css";
import { Button } from "@pplancq/shelter-ui-react";
export default function App() {
return <Button>Click Me</Button>;
}ShelterUI is actively evolving, with planned improvements including:
- Expanded component library with additional reusable UI elements.
- Enhanced theme customization and accessibility considerations.
- Storybook refinements for better interactivity and documentation.
- Performance optimizations for styling and asset handling.
While this project is primarily for personal exploration and learning, constructive feedback and ideas are always welcome.
Feel free to explore, experiment, and suggest improvements that could enhance the efficiency, usability, and adaptability of the system.
For guidelines on contributing, check out the CONTRIBUTING.md.
This project is open-source under the MIT LICENSE, allowing flexibility for adaptation and expansion.