hoppscotch/ui

Welcome to hoppscotch-ui, a collection of presentational components for our web applications. This library is built using Vue 3 and Tailwind CSS. Preview the components in Histoire.

Installation

To install the library in your project, run the following command:

pnpm add @hoppscotch/ui

Setup

In your main.ts file, import the library and register it as a plugin:

import { createApp } from "vue"
import App from "./App.vue"
// Import the library
import { plugin as HoppUI } from "@hoppscotch/ui"

// Import theme styles for default styling (optional)
import "@hoppscotch/ui/themes.css"

// Import the styles
import "@hoppscotch/ui/style.css"

const app = createApp(App)

// Register the library as a plugin
app.use(HoppUI)

app.mount("#app")

The Library uses Tailwind CSS under the hood, so you have to import the preset in your tailwind.config.ts file:

import preset from "@hoppscotch/ui/ui-preset"

export default {
  content: ["src/**/*.{vue,html}"],
  presets: [preset],
}

Usage

You can use the components in your Vue templates like this:

<template>
  <HoppButtonPrimary label="Click me" />
</template>

<script lang="ts" setup>
import { HoppButtonPrimary } from "@hoppscotch/ui"
</script>

If you're using unplugin-vue-components in your project, you can import the components like this without having to import them in the script section:

<template>
  <HoppButtonPrimary label="Click me" />
</template>

<script lang="ts" setup>
</script>

To configure resolve options for unplugin-vue-components, add the following to your vite.config.ts file:

import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"
import Components from "unplugin-vue-components/vite"

export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [
        // auto import components
        (name) => {
          if (name.startsWith("Hopp")) {
            return {
              importName: name,
              path: "@hoppscotch/ui",
            }
          }
        },
      ],
    }),
  ],
})

Histoire

We've included Histoire in this library which is similar to Storybook, to make it easy to play with the components in the browser. You can run Histoire in the browser with command

pnpm run story:dev

You can also use Histoire to create stories for your components and test them in different scenarios.

Versioning

This project follows Semantic Versioning but as the project is still pre-1.0. The code and the public exposed API should not be considered to be fixed and stable. Things can change at any time!

License

This project is licensed under the MIT License - see LICENSE for more details.