@ferris-wheel/design

Vue 3 components, styles, and utilities for Ferris Wheel applications.

Installation

pnpm add @ferris-wheel/design

The package expects Vue and Vue Router to be provided by the consuming application. Its peer dependencies also include @floating-ui/vue, @vueuse/core, and symbol-db.

Usage

Import components from the package and import the design stylesheet once in the application entrypoint:

import { FButton } from "@ferris-wheel/design";
import "@ferris-wheel/design/design.css";

<template>
    <FButton>Save</FButton>
</template>

<script setup lang="ts">
import { FButton } from "@ferris-wheel/design";
</script>

The main package export includes the component library and shared types. Components can also be imported from their individual subpath exports when needed, for example:

import FButton from "@ferris-wheel/design/FButton";

Components

The library includes components for:

• Animation and transitions
• Charts and metrics
• Content, cards, alerts, and tooltips
• Data grids, tables, badges, tags, and pagination
• Forms and inputs
• Layout, menus, panels, and heroes
• Floating elements and popups
• Icons, themes, calendars, emoji pickers, and utilities

Local development

From this package directory, start the Histoire component explorer:

pnpm run dev:story

Stories live next to their components in src/components and provide interactive examples for the library.

Build

Build the distributable package with:

pnpm run build

The compiled JavaScript, declarations, and stylesheet are written to dist/. The package exposes the main library through @ferris-wheel/design, the stylesheet through @ferris-wheel/design/design.css, and individual components through subpath exports.