0.10.1 • Published 12 months ago

@removify/ui v0.10.1

Weekly downloads
-
License
-
Repository
-
Last release
12 months ago

UI Library

Vue 3 UI library based on shadcn vue.

In a nutshell, this library is just a wrap around radix-vue with some predefined tailwindcss classes and icons.

For documentation of how to use the components, please visit radix-vue for props and shadcn vue for basic example. Most likely the only ting you need is a good language server to help you with find definition and auto-completion. All the types (props and emits) are also exported in case you need to use them.

Usage

# You must have vue installed
pnpm add @removify/ui vue

# If you need data table
pnpm add @tanstack/vue-table

# If you want to use form
pnpm add vee-validate @vee-validate/zod zod

# If you want to use stripe elements
pnpm add @stripe/stripe-js

# If you want to use carousel
pnpm add embla-carousel-vue embla-carousel

# If you want to use sonner toast
pnpm add vue-sonner

# If you want to use drawer
pnpm add vaul-vue
# Install everything
pnpm add @removify/ui vue @tanstack/vue-table vee-validate @vee-validate/zod zod @stripe/stripe-js embla-carousel-vue vue-sonner vaul-vue

Next you need to either import the css or tell tailwind to include the files.

// main.ts
import '@removify/ui/index.css';

or

// tailwind.config.ts
import { RemovifyTailwindPreset as Removify } from '@removify/ui';
// Or you can install from @removify/tailwind-preset
// import Removify from '@removify/tailwind-preset';
import type { Config } from 'tailwindcss';

export default {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}', './node_modules/@removify/ui/dist/*'],
  presets: [Removify],
} satisfies Config;

Development

pnpm install

# to develop
pnpm run dev

# to build javascript files
pnpm run build

To add a new component

pnpx shadcn-vue@latest add {component}

Known issue

Due to radix's useId will cause mismatch in ssr, before the upstream migrate to vue 3.5 native useId use below in ssr applications (nuxt):

<template>
  <ConfigProvider>
    ... Your reset code
  </ConfigProvider>
</template>

<script setup lang="ts">
import { ConfigProvider } from '@removify/ui/config';
</script>

QA

I want to just use radix.

A: You can use radix directly, but you will have to add the tailwindcss classes and icons yourself.

Work in progress

  • vue plugin to include all components. (A bit hesitate to do this as the name of the components might conflict with other libraries, e.g. Button)
0.10.1

12 months ago

0.10.0

1 year ago

0.9.27

1 year ago

0.9.23

1 year ago

0.9.24

1 year ago

0.9.25

1 year ago

0.9.26

1 year ago

0.9.20

1 year ago

0.9.21

1 year ago

0.9.22

1 year ago

0.9.18-beta.1

1 year ago

0.9.12

1 year ago

0.9.13

1 year ago

0.9.14

1 year ago

0.9.15

1 year ago

0.9.16

1 year ago

0.9.17

1 year ago

0.9.18

1 year ago

0.9.19

1 year ago

0.9.11

1 year ago

0.9.10

1 year ago

0.9.8

1 year ago

0.9.7

1 year ago

0.9.9

1 year ago

0.9.4

1 year ago

0.9.6

1 year ago

0.9.5

1 year ago

0.9.3

1 year ago

0.9.0

1 year ago

0.9.2

1 year ago

0.9.1

1 year ago

0.7.11-beta.1

1 year ago

0.8.0

1 year ago

0.7.11

1 year ago

0.7.10

1 year ago

0.7.12

1 year ago

0.7.13-beta.1

1 year ago

0.7.9

1 year ago

0.7.8

1 year ago

0.7.7

1 year ago

0.7.6

1 year ago

0.7.5

1 year ago

0.7.4

1 year ago

0.7.3

1 year ago

0.7.3-beta.13

1 year ago

0.7.3-beta.12

1 year ago

0.7.3-beta.11

1 year ago

0.7.3-beta.10

1 year ago

0.7.3-beta.9

1 year ago

0.7.3-beta.8

1 year ago

0.7.3-beta.7

1 year ago

0.7.3-beta.6

1 year ago

0.7.3-beta.5

1 year ago

0.7.3-beta.4

1 year ago

0.7.3-beta.3

1 year ago

0.7.3-beta.2

1 year ago

0.7.3-beta.1

1 year ago

0.7.2

1 year ago

0.7.1

1 year ago

0.7.0

1 year ago

0.6.21

1 year ago

0.6.20

1 year ago

0.6.19

1 year ago

0.6.18

1 year ago

0.6.17

1 year ago

0.6.16

1 year ago

0.6.15

1 year ago

0.6.14

1 year ago

0.6.13

1 year ago

0.6.12

1 year ago

0.6.11

1 year ago

0.6.10

1 year ago

0.6.9

1 year ago

0.6.8

1 year ago

0.6.7

1 year ago

0.6.6

1 year ago

0.6.5

1 year ago

0.6.4

1 year ago

0.6.3

1 year ago

0.6.2

1 year ago

0.6.1

1 year ago

0.6.0

1 year ago

0.5.9

1 year ago

0.5.8

1 year ago

0.5.7

1 year ago

0.5.6

1 year ago

0.5.5

1 year ago

0.5.4

1 year ago

0.5.3

1 year ago

0.5.2

1 year ago

0.5.1

1 year ago

0.5.0

1 year ago

0.4.1

1 year ago

0.4.0

1 year ago

0.3.0

1 year ago

0.3.0-beta.1

1 year ago

0.2.6

1 year ago

0.2.6-beta.1

1 year ago

0.2.5

1 year ago

0.2.4

1 year ago

0.2.3

1 year ago

0.2.2

1 year ago

0.2.1

1 year ago

0.2.0

1 year ago

0.1.5

1 year ago

0.1.4

1 year ago

0.1.3

1 year ago

0.1.2

1 year ago

0.1.1

1 year ago

0.1.0

1 year ago

0.0.4

1 year ago

0.0.3

1 year ago

0.0.2

1 year ago

0.0.1

1 year ago