Awesome

🧐 Introduction

Vue-Cirrus is a component framework for Vue. The goal of Vue-Cirrus is to provide clean readable and reusable components that make building your application easier.

You can build your amazing applications with the Power of Vue, Cirrus and a massive library of beautifully crafted components and features.

This framework uses the <a href="https://github.com/Spiderpig86/Cirrus">Cirrus CSS framework</a> for better styling and it is an adaption of vue components.

The UI library only supports Vue 3. For Vue 2, please use an older version of Vue Cirrus.

🔨 Quick Install

1. Install with npm/yarn

npm install vue-cirrus@latest
# OR
yarn add vue-cirrus@latest

2. Include the following in your public.html file

<link href="https://unpkg.com/cirrus-ui" type="text/css" rel="stylesheet" />

3a. Import all Vue-Cirrus components by doing:

import VueCirrus from 'vue-cirrus';
import 'vue-cirrus/dist/vue-cirrus.css';

createApp(App).use(VueCirrus).mount('#app');

3b. Or simply import single components of Vue-Cirrus by doing:

import { VNavbar } from 'vue-cirrus';
import 'vue-cirrus/dist/vue-cirrus.css';

createApp(App).use(VNavbar).mount('#app');

4. Test, if it works by including the following in a vue file

<v-btn animated animation="loadingLeft">Button Test</v-btn>

🔮 Framework Components

• Avatars
  • Avatars are simple small images for easy displaying pictures of users
• Badges
  • Badges are there for easily displaying numbers above a text or displaying info cards above some components
• Buttons
  • Simple buttons, no explanation needed
• Cards
  • Simply create some good looking cards with some special effects, if needed
• Code
  • Display your code on your website to demonstrate your framework or library
• Columns
  • A easy to use and simple 12 grid system
• Dividers
  • Divide your content for better structure
• Dropdown
  • Create dropdown menus for structuring your menu points
• Footer
  • Create an easy footer for displaying your company information or other useful things
• Forms(SearchBar, DatePicker, Text)
  • Easily create a login form with these components or simply a search bar
• Frames
  • Simply generate a profile frame for easily displaying information
• Grid
  • A modern component for using the modern CSS grid system
• Links
  • Easily create nice animated links
• Menus
  • Display really beautiful looking menus
• Modals
  • Simple modals for displaying further information
• Navbar
  • It is so easy to create a simple navbar with this component
• NextPrev
  • Create next and previous buttons to navigate through your documentation or articles
• Pagination
  • Easily paginate your articles, blogs or pages with this component
• Parallax
  • Create a parallax effect with this component
• ParallaxElement
  • Create some really cool moving parallax elements
• Placeholder
  • If you do not know, what to insert, you can take this placeholder
• Snackbars
  • Create snackbars for displaying information on the top or bottom of the screen
• Sidebar
  • It has never been easier to create a sidebar
• Spaces
  • Spaces can be really good to breath
• Tabs
  • Create tabs for seperating the content of your page
• Tiles
  • Tiles are useful for creating easy small components, like tweets
• Toasts
  • Toasts are so easy to create with different colored backgrounds.

💎 Be a part of vue-cirrus

If you want to be a part of vue-cirrus, you can make pull requests and add/edit components.

Here is the pull request template.

📒 Changelog

If you have fun looking at some changelogs then you can go here.

👏 Acknowledgements

Thank you to the following libraries for making this library possible.

• Cirrus
• Vue