The Octopus Design System is a Vue.js component library that follows best practices in user interface design to provide a consistent and high-quality visual experience. The library is built based on atomic components, which can be combined and reused to create flexible and scalable interfaces.
npm i octopus-design-system
After installation, you can import Octopus Design System components into your Vue.js project as follows:
Each component is imported from the "components" folder, which includes sub-folders for atoms, molecules, and organisms. Therefore, each component should be imported from its appropriate path to ensure proper usage and functionality.
<template>
<AmButton label="Click me!" />
</template>
<script>
import AmButton from "octopus-design-system/src/components/atoms/AmButton/AmButton.vue";
export default {
name: "MyComponent",
components: {
AmButton,
},
};
</script>
The Octopus Design System library includes a range of Vue.js components that can be used to create consistent and high-quality user interfaces. Some examples of components available in the library include:
AmButton: A button with options for customizing size, color, and icon.
AmIcon: An icon with options for customizing size, color, and name.
AmTypography: Text with options for customizing size, color, and variation.
And many others...
If you would like to contribute to Octopus, please fork the repository and submit a pull request. You can also open an issue if you have any questions or suggestions.