@bronzelabs/tribe-ui v1.1.12

Tribe UI

The Tribe Project's design system for the web.

• Installation
• Setup
• Usage

Installation

npm i @bronzelabs/tribe-ui @bronzelabs/tribe-icons @bronzelabs/tribe-tailwind-preset

Then install peer dependencies:

npm i react react-dom next motion

Setup

The Tribe Project uses tailwind as its styling solution. If you don't already have tailwind setup within your project head to the tailwindcss docs.

Begin by adding the tribe-tailwind-preset to your tailwind config:

import tribe from "@bronzelabs/tribe-tailwind-preset"

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    /* ... */
  ],
  presets: [tribe],
  plugins: [],
}

Caveat

Currently you'll need to add the design system source files to the content field of your tailwind.config.js so they are picked up by the compiler.

import tribe from "@bronzelabs/tribe-tailwind-preset"

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    /* ... */
    "node_modules/@bronzelabs/tribe-ui/dist/**/*.{js,jsx}", // <----
  ],
  presets: [tribe],
  plugins: [],
}

N.B. This behaviour is not ideal and we are looking for more stable ways round this.

Usage

To use a component from the design system, simply import and render it within you jsx:

import React from "react"
import { Button } from "@bronzelabs/tribe-ui"

const MyPage = () => {
  return (
    <div>
      <Button>Hello World</Button>
    </div>
  )
}

export default MyPage

For more in-depth explanations of how to use specific components, check out the storybook.