Component library

Components are a small set of reusable Web Components that are implementations of specific patterns. They are used to encapsulate elements that are commonly used, but difficult to build in a consistent and accessible way.

Available components

• ComboBox
• DatePicker
• DateRangePicker

Using components

Components are available on the NPM registry, and can be imported directly into your node project. Alternatively, we also provide the files on the Design System CDN, which can be used in any modern browser:

<tt-combobox id="combobox">
    <option value="1" slot="option">Option 1</option>
    <option value="2" slot="option">Option 2</option>
    <option value="3" slot="option">Option 3</option>
</tt-combobox>
<script type="module" src="https://cdn.triptease.io/tt-combobox/latest/tt-combobox.js"></script>

CDN urls are formatted as /<component tag name>/<version>/<component tag name>.js, where <component tag name> is the tag name of the component (e.g. tt-combobox), and <version> is the version of the component you want to use. The version can be a specific version number, latest to always use the latest version, or <major>.x.x to use the latest version of a specific major version (e.g. 5.x.x).

Using components in React

We also provide a React wrapper for the components, which can be used in any React project. To use the React wrapper, you will need to install the package:

npm install @triptease/react

Then, you can import the components into your React project:

import { ComboBox } from "@triptease/webcomponents";

const App = () => {
  return (
    <ComboBox
      id="my-combobox"
     >
        <option value="1" slot="option">Option 1</option>
        <option value="2" slot="option">Option 2</option>
        <option value="3" slot="option">Option 3</option>
    </ComboBox>
  );
};