https://github.com/hoppscotch/ui
https://ui.hoppscotch.io
https://github.com/hoppscotch/ui
Last synced: 3 months ago
JSON representation
https://ui.hoppscotch.io
- Host: GitHub
- URL: https://github.com/hoppscotch/ui
- Owner: hoppscotch
- Created: 2023-11-14T08:46:00.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-04-22T06:10:39.000Z (about 1 year ago)
- Last Synced: 2024-04-23T13:46:19.435Z (about 1 year ago)
- Language: Vue
- Homepage: https://ui.hoppscotch.io
- Size: 375 KB
- Stars: 12
- Watchers: 4
- Forks: 6
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Hoppscotch UI ALPHA
Welcome to hoppscotch-ui, a collection of presentational components for our web applications. This library is built using [Vue 3](https://v3.vuejs.org/) and [Tailwind CSS](https://tailwindcss.com/). Preview the components in [Histoire](https://ui.hoppscotch.io/).
## Installation
To install the library in your project, run the following command:
```bash
pnpm add @hoppscotch/ui
```
## Setup
In your `main.ts` file, import the library and register it as a plugin:
```ts
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:
```ts
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:
```ts
import { HoppButtonPrimary } from "@hoppscotch/ui"
```
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:
```ts
```
To configure resolve options for `unplugin-vue-components`, add the following to your `vite.config.ts` file:
```ts
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](https://histoire.dev/) to create stories for your components and test them in different scenarios.
## Versioning
This project follows [Semantic Versioning](https://semver.org/) 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](https://opensource.org/licenses/MIT) - see [`LICENSE`](https://github.com/hoppscotch/hoppscotch/blob/main/LICENSE) for more details.
###### built with ❤︎ by the [Hoppscotch Team](https://github.com/hoppscotch) and [contributors](https://github.com/hoppscotch/hoppscotch/graphs/contributors).