@bronzelabs/tribe-ui v0.2.17

Tribe UI

The Tribe Project's design system for the web.

• Installation
• Setup
• Usage

Installation

# install with yarn
yarn add @bronzelabs/tribe-ui @bronzelabs/tribe-icons @bronzelabs/tribe-tailwind-preset

# or with npm
npm i @bronzelabs/tribe-ui @bronzelabs/tribe-icons @bronzelabs/tribe-tailwind-preset

Then install peer dependencies:

# with yarn
yarn add react react-dom next framer-motion

# with npm
npm i react react-dom next framer-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.