Modern
Atomic
Design
Articles
Storybook
Discover example components in Storybook.
Contributing
This project is dedicated to collect, present and experiment with both a tech stack and combined methodologies of atomic design systems, headless components and utility-first styling towards building UI Component Libraries or simply an UI based on a Design System.
Everyone is welcome to contribute to this project. The Application is based on NuxtJS, TailwindCSS and HeadlessUI and uses Figma for the design input and Storybook for the implementation output.
Content
Markdown articles like the one you are reading now collect information in a blog-like manner to present different topics involved in the project.Figma
An example Design System is provided in Figma containing guidelines for the fictive implementation.Library
The local library folder serves as space to experiment with own headless componentsStorybook
Visual and interactive presentation of the Component Library implementationComponents
Implementation of examples, split into atoms, molecules and organisms. Each should contain a story definition.Getting Started
# install dependencies
yarn
# static site generation / production
yarn generate
yarn start
# serve with hot reload at localhost:3000
yarn dev
For the example components you can start the Storybook locally:
yarn storybook
The application is built as a static site served by Github Pages, content like this article can be modified directly on Github. Find out more about @nuxt/content.
