https://github.com/anime-skip/ui

Vue component library and TailwindCSS base
https://github.com/anime-skip/ui

tailwindcss typescript vue3

Last synced: 3 months ago
JSON representation

Vue component library and TailwindCSS base

• Host: GitHub
• URL: https://github.com/anime-skip/ui
• Owner: anime-skip
• License: gpl-3.0
• Created: 2020-12-28T20:07:18.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2022-05-25T04:31:05.000Z (over 2 years ago)
• Last Synced: 2024-11-04T22:54:06.555Z (3 months ago)
• Topics: tailwindcss, typescript, vue3
• Language: Vue
• Homepage:
• Size: 744 KB
• Stars: 2
• Watchers: 1
• Forks: 1
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
![Available Components](/.github/assets/components.png)

# Anime Skip UI

Vue component library for all of Anime Skip, using [TailwindCSS](https://tailwindcss.com/docs), powering the website and web extension

```bash

echo "@anime-skip:registry=https://npm.pkg.github.com/" >> .npmrc

pnpm add @anime-skip/ui

```




## Contributing

See the [contributing guidelines](https://github.com/anime-skip/docs/wiki) for all of Anime Skip




## Get Started

1. Install the library:

   ```bash

   echo "@anime-skip:registry=https://npm.pkg.github.com/" >> .npmrc

   pnpm add @anime-skip/ui

   ```

1. [Setup TailwindCSS](https://tailwindcss.com/docs/guides/vue-3-vite#setting-up-tailwind-css), stopping after the "Create your configuration files" steps

1. Modify the tailwind config

   ```js

   // tailwind.config.js

   module.exports = {

     presets: [require('@anime-skip/ui/tailwind.preset')],

     purge: [

       './index.html',

       './src/**/*.{vue,js,ts,jsx,tsx}',

       './node_modules/@anime-skip/ui/ui.*.js',

     ],

   };

   ```

1. Create a PostCSS config file

   ```js

   module.exports = {

     plugins: [require('tailwindcss'), require('autoprefixer')],

   };

   ```

1. Import the styles in your main entrypoint

   ```js

   import '@anime-skip/ui/tailwind.css';

   ```




## Usage

This library is not documented yet. Play around with the code to see what changes, then use the components in your code