@techfides/ui-library-vue

Vue 3 components for TechFides, built on Ark UI headless primitives and Tailwind CSS v4.

Dark glassmorphism on an aurora backdrop: translucent surfaces over a night sky, depth carried by lightness rather than shadow, and the accent used as light rather than paint.

Install

pnpm add @techfides/ui-library-vue @techfides/ui-library-design

The Vue package depends on @techfides/ui-library-core and @techfides/ui-library-design and brings both with it.

BarChart and Stat sparklines need echarts and vue-echarts as well; nothing else does, so they are optional peers.

Vue 3.5 or newer is a peer dependency. The package is ESM only and expects Node 24 or newer for anything that renders it server-side.

Wire it up

Import the stylesheet once, from your Tailwind entry:

@import 'tailwindcss';
@import '@techfides/ui-library-vue/css';

That one import brings the design tokens, the base layer and the @source directives Tailwind needs to find the classes the components ship with, and puts the page on the theme: background, foreground, color-scheme: dark and the body font. Fonts are a separate opt-in import: @import '@techfides/ui-library-design/css/fonts' for Inter and Poppins. Every subset sits behind a unicode-range, so a page downloads only the ones it writes in; Nuxt projects may prefer @nuxt/fonts with the two families. There is nothing else to set up, and nothing to copy into a public folder.

Then use a component:

<script setup lang="ts">
import { Button, Stat } from '@techfides/ui-library-vue'
import { Banknote } from '@techfides/ui-library-vue/icons'
</script>

<template>
  <Stat label="Billed this month" value="1 284 600" unit="Kč" hint="Across 34 open work items">
    <template #icon><Banknote /></template>
  </Stat>

  <Button variant="primary" size="lg">Approve release</Button>
</template>

What is in it

Accordion, Alert, BarChart, BrandMark, Button, CardHeader, Checkbox, Chip, CodeEditor, CommandPalette, DatePicker, Dialog, EmptyState, ErrorState, Feature, FieldFrame, FieldNote, Findings, Heading, Heartbeat, Input, ListItem, Listbox, LogViewer, Marquee, Menu, MetaRow, Meter, NebulaVeil, NumberRange, Paper, ProgressBar, Queue, RadioGroup, ScopeSwitcher, ScrollArea, Section, SectionHeader, SegmentedControl, Select, Separator, Sidebar, Skeleton, Sky, Slider, Stat, Steps, Switch, Table, Text, Textarea, Tile, Tooltip, TopBar, UserMenu.

Every prop, slot and state is documented in the Storybook, which is also where each component's contract is measured rather than described.

Entry points

| import | what it is | | --------------------------------- | --------------------------------------------------------- | | @techfides/ui-library-vue | the components and their types | | @techfides/ui-library-vue/icons | Lucide, re-exported, so a second icon set never creeps in | | @techfides/ui-library-vue/css | the stylesheet, imported once from your Tailwind entry |

Importing one component pulls in one component: measured in a production Nuxt build, Button costs 13 kB gzip over a bare app of the same kind, Table 109 kB and CodeEditor 143 kB. The charting engine is not part of any of them — BarChart and Stat load it on demand, so it costs 14 kB up front and fetches its own 179 kB chunk once a chart mounts. The stylesheet is a flat 22 kB gzip whatever you import.

Language

Every word a component says on its own behalf comes from the language you hand it, so nothing is hard-coded in English:

<script setup lang="ts">
import { LanguageProvider } from '@techfides/ui-library-vue'
import { czech } from '@techfides/ui-library-core'
</script>

<template>
  <LanguageProvider :language="czech">
    <App />
  </LanguageProvider>
</template>

Wrap it once above your app with a Language object. LanguageProvider also renders Ark UI's own LocaleProvider and EnvironmentProvider around its slot, so every component's overlay and Intl-backed formatting follow the same locale without a second setup step. Two languages ship with the core package — english and czech; hand it your own Language for any other. Reach for the lower-level provideLanguage composable directly only outside a component tree Ark can wrap, such as a non-Vue entry point.

Publishing this package

Use pnpm, not npm. The published exports map lives in publishConfig, which pnpm applies and npm ignores — packing with npm would publish a manifest pointing at source files that are not in the tarball. A prepack guard refuses to run under any other agent.

Licence

MIT