Pine is a design system that includes the building blocks necessary to create beautiful and accessible user interfaces and experiences. Our library of tools comes with design tokens in the form of CSS custom properties and web components that can be added to any existing project. Created by Kajabi.
Pine can be added to any project via CDN. Add the following link and script tags to the <head>:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@pine-ds/core@[VERSION]/dist/pine-core/pine-core.css" />
<script type="module" src="https://cdn.jsdelivr.net/npm/@pine-ds/core@[VERSION]/dist/pine-core/pine-core.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/@pine-ds/core@[VERSION]/dist/pine-core/index.esm.js"></script>Replace [VERSION] with the desired version number. For example, version 2.0.0 can be accessed as [email protected]. If the latest version is desired, use core@latest.
To use the components within React projects, they must also be installed via npm:
npm install @pine-ds/react
As Pine components are web components, they can be used as simply as any other HTML tag. For example, to add an accent button to the project, add the following:
<pds-button variant="accent">Pine Button</pds-button>For use within React files, components should follow PascalCase to match React component convention:
<PdsCopytext value="Copy this text" fullWidth="true"></PdsCopytext>For the full list of properties available for each component and more robust documentation, please see Pine's Storybook.
To learn more about contributing to Pine, please see the Contribution docs.