@kiva/kv-components
v3.107.2
Published
A library of accessible UI components that adhere to Kiva's Design System. Currently built using Vue 2.
Downloads
1,789
Keywords
Readme
kv-components
A library of accessible UI components that adhere to Kiva's Design System. Currently built using Vue 2.
Using these Components
- Install tailwind into your project
- Install components and design definitions:
npm install @kiva/kv-components && npm install @kiva/kv-tokens --save-dev
- Add our Tailwind config as a preset in your tailwind.config.js
// tailwind.config.js
module.exports = {
presets: [require("@kiva/kv-tokens/configs/tailwind.config")],
// Project-specific customizations
theme: {
//...
},
content: [
//...
],
// ...
};
- Import and use the components in your Vue 2 project
<template>
<div>
<h2 class="tw-text-secondary">Test Title</h2>
<kv-button>Lend today</kv-button>
</div>
</template>
<script>
import KvButton from "kv-ui-elements/kv-components/vue/KvButton.vue";
export default {
components: {
KvButton,
},
};
</script>
Developing Components using Storybook
Pull down the project and fire up Storybook locally
git clone [email protected]:kiva/kv-ui-elements.git
cd kv-ui-elements
npm install
cd @kiva/kv-components
npm run storybook
Writing Stories
- Write stories in the CSF format
- Build stories (permutations) that describe the intended look and feel given the components set of inputs (props or slots)
- Use JsHint to document all props, slots and events so Storybook docs will pick them up
Additional Resources
- https://storybook.js.org/tutorials/design-systems-for-developers
Recommended VSCode Extensions
Tests
npm run test
Contribution Guidelines
The Kiva UI project is bound by a Code of Conduct.
Kiva welcomes outside contributions to our UI repository. If you have any ideas for a feature or improvement, create an issue and we can discuss whether it makes sense to create a pull request. Thanks for the help!