Pit Viper

v2.53.1

Pit Viper

v2.53.1
v1 / v2

  • Home
  • PV Components
  • Intro/Usage

Intro/Usage

Pit Viper (PV) Components are a collection of reusable components built on top of the Pit Viper CSS framework.

  • Dev Guide: Information on how to add components to the library or to run the components locally
  • Storybook is available for all components, to test out variants and view all available properties.
  • Figma Components contains the components used by the design team. We are currently
    rolling out support for Figma Code Connect, which will allow you to get production-ready code snippets when viewing components in Figma designs.

Usage

The following documentation assumes you have installed the Pit Viper npm package @turquoisehealth/pit-viper. If you haven’t yet, follow the setup instructions first.

Using PV Components with Vue

PV Components are built using Vue 3 and have native Vue support. For using these components in a non-Vue environment, check out the Using PV Components without Vue section below.

All components have TypeScript support, and are built as Vue Single File Components (SFCs) with the Composition API.

When including PV Components in your Vue project, we recommend following the same structure to maintain consistency.

import { PvButton } from "@turquoishealth/pit-viper/components";

<PvButton label="Example Button"/>

Tables and Charts

Table and Chart components are available as separate packages. Refer to the component documentation to see which package a component belongs to.

import { PvDataTable } from "@turquoishealth/pit-viper/components/tables";
import { PvChart } from "@turquoishealth/pit-viper/components/charts";

Pit Viper Sandbox (Vue + Vite)

Sandbox for components in a bundled Vue application. open in new tab.

Pit Viper Sandbox (Vue Browser)

Sandbox for components in an HTML application that loads Vue in the browser. open in new tab.

Using PV Components without Vue

PV Components are built in Vue, but also support being exported as framework-agnostic Web Components. This means that you can use them in plain HTML or even another framework!
Note: Pit Viper web components are currently only supported for base components (not tables and charts).

Some notable implementation differences between native Vue components and Vue web components are:

  • Any Vue props that are primitive types (booleans, strings, numbers) are automatically converted to attributes.
  • Any complex props (objects, arrays, functions) cannot be injected into HTML directly, and require at least some JS to be used.*
  • Vue components can be Pascal-cased or kebab-case, whereas Vue web components are always kebab-cased (e.g. PvButton becomes <pv-button>)
  • Vue web components do still rely on the Vue runtime, which is a 16kb file that is bundled in the web component build automatically.

Read the Vue documentation for more information on using Vue web components.

Pit Viper Sandbox (Web Components)

Sandbox for components in an HTML application that uses web components (no Vue). open in new tab.