Love.irish pattern library and design system
2025
100+ components and patterns built to create a consistent experience across the Love.irish app and website. Follows the atomic design methodology including everything from buttons, dropcaps, content to templates and built using React, Tailwind CSS and Storybook.
I talk more about this in my blog post about design system strategies. I have also included more details here about the components specifically.
- Design system includes components, modules, templates and hooks to quickly build new screens and organized into namespaces like core, application, community, resource, adventure.
- Uses system generated types from the server from GraphQL packaged in @love-irish/types to add another layer of validation to make sure fields exist. Common queries are also published in @love-irish/graphql-api
- Every component exports a preview component which can be used in places like Storybook documentation or in the app
Components
The smallest building blocks which are typically "dumb" components where only presentational functionality is included like formatting text or exposing APIs to use when building larger patterns. These don't make requests or use too much logic that restricts composability or flexibility where things like modules or templates do.
Templates
The largest building block which includes pre-made screens and some include queries or have complex logic to handle logged in users.
