nanakura
dc26878386
CI / Lint (push) Canceled after 0s
CI / Build Test (stage-web) (push) Canceled after 0s
CI / Build Test (ui-loading-screens) (push) Canceled after 0s
CI / Build Test (ui-transitions) (push) Canceled after 0s
CI / Unit Test (push) Canceled after 0s
CI / Type Check (push) Canceled after 0s
CI / Check Provenance (push) Canceled after 0s
Sync Labels / sync-labels (push) Successful in 1m43s
- Remove stage-tamagotchi, stage-pocket, server, and engine workspaces with their workflows, addons, and docs - Switch the toolchain from pnpm to bun, replace lockfiles with bun.lock - Rewrite remaining product references to Moeka
@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`
bun add @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:
bun add -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>