bitinflow UI Kit

Goal

The main goal of this package is to provide a clean & simple usage of common components in bitinflow brand.

Installation

1. Add `@bitinflow/ui` to your `package.json` dependencies

Since this package is not released on npm (yet), we need to add @bitinflow/ui as dependency to our package.json file manually:

"@bitinflow/ui": "github:bitinflow/ui#main",

Install/Update the dependency:

npm install @bitinflow/ui

2. Ensure tailwind is up-to-date

Add bitinflow colors to your theme.extend.colors
Add ./node_modules/@bitinflow/ui/**/*.vue to content

const colors = require('tailwindcss/colors')
const bitinflowColors = require('@bitinflow/ui/colors')

/** @type {import('tailwindcss').Config} */
module.exports = {
  ...
  content: [
    ...
    './node_modules/@bitinflow/ui/**/*.vue',
  ],
  theme: {
    extend: {
      colors: {
        ...
        zinc: colors.zinc,
        primary: bitinflowColors.primary,
        base: bitinflowColors.base
      }
    },
  },
}

Example Skeleton

This example skeleton provides the default ui experience for dashboards, featuring first-, second- & third-level menus.

<template>
  <FloatingBanner></FloatingBanner>
  <FirstLevelMenu>
    <template v-slot:top>
      <FirstLevelLink icon="fa-home">Home</FirstLevelLink>
      <FirstLevelLink icon="fa-location-dot">Pull Zones</FirstLevelLink>
      <FirstLevelLink icon="fa-bucket">Buckets</FirstLevelLink>
      <FirstLevelLink icon="fa-meteor">Spaces</FirstLevelLink>
      <FirstLevelLink icon="fa-globe">Domains</FirstLevelLink>
      <FirstLevelLink icon="fa-list">Zones</FirstLevelLink>
    </template>

    <template v-slot:bottom>
      <FirstLevelLink icon="fa-wallet">Billing</FirstLevelLink>
      <FirstLevelLink icon="fa-fingerprint">Account</FirstLevelLink>
      <FirstLevelLink icon="fa-arrow-right-from-bracket">Logout</FirstLevelLink>
    </template>

    <SecondLevelMenu>
      <template v-slot:title>Domains</template>

      <SecondLevelLink icon="fa-globe">example.com</SecondLevelLink>
      <SecondLevelLink icon="fa-globe">example.com</SecondLevelLink>
      <SecondLevelLink icon="fa-globe">example.com</SecondLevelLink>
      <SecondLevelLink icon="fa-globe">example.com</SecondLevelLink>
    </SecondLevelMenu>

    <FlexAuto>
      <ScreenScrollContainer>
        <ThirdLevelMenu>
          <template v-slot:title>Test</template>
        </ThirdLevelMenu>
        <Container>
          <HeroCard>
            <div class="text-3xl">Yeet!</div>
          </HeroCard>
          <Card>
            <CardHeader>Test</CardHeader>
            <CardBody>Test</CardBody>
          </Card>
          <Card>
            <CardHeader>Test</CardHeader>
            <CardBody>Test</CardBody>
          </Card>
        </Container>
      </ScreenScrollContainer>
    </FlexAuto>
  </FirstLevelMenu>
</template>

<script>
import Card from "@bitinflow/ui/components/Card";
import CardHeader from "@bitinflow/ui/components/CardHeader";
import CardBody from "@bitinflow/ui/components/CardBody";
import SecondLevelMenu from "@bitinflow/ui/components/SecondLevelMenu";
import FloatingBanner from "@bitinflow/ui/components/FloatingBanner";
import FirstLevelMenu from "@bitinflow/ui/components/FirstLevelMenu";
import ScreenScrollContainer from "@bitinflow/ui/components/ScreenScrollContainer";

export default {
  components: {FloatingBanner, ScreenScrollContainer, FirstLevelMenu, SecondLevelMenu, CardBody, CardHeader, Card},
}
</script>

3.5 KiB Raw Blame History