@proj-airi/ui

A stylized UI component library built with Reka UI and UnoCSS.

To preview the components, refer to the stage-ui package for instructions for running the Histoire UI storyboard.

Get started

Install the library:

ni @proj-airi/ui -D # from @antfu/ni, can be installed via `npm i -g @antfu/ni`
pnpm i @proj-airi/ui -D
yarn i @proj-airi/ui -D
npm i @proj-airi/ui -D

This library requires unocss with Attributify Mode and a style reset.

First, install unocss if you haven't already:

pnpm i -D unocss

Next, in your uno.config.ts, add presetAttributify() to your presets array:

import { defineConfig, presetAttributify } from 'unocss'

export default defineConfig({
  presets: [
    presetAttributify(),
    // ...your other presets
  ],
})

Finally, import the reset styles in your main.ts:

import '@unocss/reset/tailwind.css'

Usage

<script setup lang="ts">
import { Button } from '@proj-airi/ui'
</script>

<template>
  <Button>Click me</Button>
</template>

Components

• Animations
  • TransitionVertical
• Form
  • Checkbox
  • Select
  • Field
  • Input
  • Radio
  • Range
  • ComboboxSelect
  • Textarea

License

MIT

Swipe actions

Compose SwipeActionsRoot, SwipeActionsContent, SwipeActionsList, and SwipeActionsItem. Bind v-model:open on Root and give each Item a unique, stable value within its List. Add Lists with side="start" and side="end" for bidirectional swipes. Root's v-model:side selects the revealed edge; dir maps logical edges in RTL. Its action(value, side) event identifies the selected action. Each List uses its last Item as the long-swipe default. The List's defaultAction can choose a different value; fullSwipe=false disables long-swipe selection.

Items register and follow DOM order automatically. Reordering or removing them cancels pending gestures. All parts support Reka UI's as and asChild. List controls per-action width and gap. :gap="16" leaves 16px between Items and 8px at each outer edge, including beside Content during entry. Its container size lets Items appear one at a time from the outer edge, with reversible scale and opacity curves. Items without space remain registered but cannot receive input or focus. Use an opaque background for Content.

Use SwipeActionButton inside SwipeActionsItem as-child for the standard surface, icon, and text. Pass the Item slot's takeover and physical edge to the button. showLabel=false fills the former text area while keeping the accessible name.

Use these components for persistent action areas on either side. They do not own conversation storage, undo, or swipe-to-reply behavior. See the component reference and the stage-ui Histoire story Misc → Swipe Actions.