# Using Components

Components are re-usable UI elements with props, slots and events for constructing UI's. All the components provided by @ci/stratus-components have had their UI, interactions and more approved by the design system out of the box.

To use most components, you must first import them from @ci/stratus-components. Then you can use them in your template.

<template>
  <ci-button>
    <ci-icon icon="check" />
    My button
  </ci-button>
</template>

<script>
import { CiButton, CiIcon } from '@ci/stratus-components';
export default {
  components: {
    CiButton,
    CiIcon
  }
}
</script>

# Documenting Components

In order to make sure the component is functioning correctly, and to ensure that an engineer looking at the docs knows what the component does, create a demo for each of the following:

every prop. If relevant, show the variations of a prop. For example, for a size prop show all sizes.
every slot. Every slot should be used in a demo.
every event. Create a demo that uses the event to do something

App Switcher →