## Getting Started
### View the Docs & Component Playground
#### SLDS
[![Storybook](https://cdn.jsdelivr.net/gh/storybookjs/brand@main/badge/badge-storybook.svg)](https://release--66f6c809a4249c107d91c9f5.chromatic.com/)
#### Gator
[![Storybook](https://cdn.jsdelivr.net/gh/storybookjs/brand@main/badge/badge-storybook.svg)](https://release--647602387404abb8d86f89f6.chromatic.com/)

### Consuming the nCino Web Components
nCino Web Components are Native Web Components that can be consumed in any framework, or no framework at all.

#### Global Styles
If you want to make use of the global utility styles available, import the styles for your design system.

Ex `import '@ncino/gator/styles`

#### Framework Samples
View the samples in the `./samples` directory for examples of how to consume the components for the framework of your choice.

#### Consumption Options
You can either import components individually or all components through a single file.

##### Single File
Simple import the `index.js` included in the Dist. This file includes all components.

```javascript
import '@ncino/web-components';
```

##### Individual Components
Import the components you need individually.

```javascript
// SLDS Component
import '@ncino/web-components/dist/components/button/button.slds';

// Gator Component
import '@ncino/web-components/dist/components/button/button.gator';
```

#### Getting IntelliSense on the Components
Included in the distribution of these components will include both a `custom-elements.json` manifest file and a `web-types.json` file
These files can be used to provide IntelliSense in your IDE and should work OOTB but may need additional configuration depending on your IDE.

#### Using Typescript?
Each of the component declare a global definition for the custom web components. This means your IDE can recognize the components and provide intellisense.

All types are exported in the `dist/types` folder of the npm package.