@tektoncd/dashboard-components

React components for the Tekton Dashboard

Getting started

To install @tektoncd/dashboard-components in your project, you will need to run the following command using npm:

npm install -S @tektoncd/dashboard-components

If you prefer Yarn, use the following command instead:

yarn add @tektoncd/dashboard-components

You will also need to install the Carbon packages which provide the base styling and components:

• Carbon Components React

This package requires Dart Sass in order to compile styles.

If you're new to Sass, we recommend checking out the following resources and links:

• Sass Basics

For info on how to configure Sass for your project, here are some common frameworks' documentation worth reviewing:

• Next.js with Sass
• Remix with Sass
• Gatsby with Sass

Or if you're just using a bundler:

• Parcel with Sass
• Vite with Sass

Or anything else not listed above:

• Webpack with Sass
• Create React App with Sass
• Snowpack with Sass

Usage

The @tektoncd/dashboard-components package provides components and icons used by the Tekton Dashboard.

To use a component, you can import it directly from the package:

import { StatusIcon } from '@tektoncd/dashboard-components';

function MyComponent() {
  return <StatusIcon status="Unknown" reason="Pending" />;
}

To include the styles for a specific component:

@import '@tektoncd/dashboard-components/src/components/StatusIcon/StatusIcon.scss';

For a full list of components available, checkout our Storybook.

📖 API Documentation

If you're looking for @tektoncd/dashboard-components API documentation, check out:

• Storybook

🙌 Contributing

We're always looking for contributors to help us fix bugs, build new features, or help us improve the project documentation. If you're interested, definitely check out our Contributing Guide! 👀

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License. Code samples are licensed under the Apache 2.0 License.