{"id":13476562,"url":"https://github.com/andrejsharapov/vue-box-shadows","last_synced_at":"2025-03-27T03:30:30.699Z","repository":{"id":45807128,"uuid":"514680914","full_name":"andrejsharapov/vue-box-shadows","owner":"andrejsharapov","description":"Collection of CSS box-shadows for every taste contains more than 100 simple, beautiful and airy shadows.","archived":false,"fork":false,"pushed_at":"2022-11-15T20:25:14.000Z","size":397,"stargazers_count":30,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-08T05:48:54.989Z","etag":null,"topics":["box-shadow","css","frontend","vue","vuejs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/andrejsharapov.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-07-16T20:42:31.000Z","updated_at":"2024-11-24T22:46:31.000Z","dependencies_parsed_at":"2023-01-23T07:31:33.548Z","dependency_job_id":null,"html_url":"https://github.com/andrejsharapov/vue-box-shadows","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrejsharapov%2Fvue-box-shadows","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrejsharapov%2Fvue-box-shadows/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrejsharapov%2Fvue-box-shadows/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrejsharapov%2Fvue-box-shadows/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/andrejsharapov","download_url":"https://codeload.github.com/andrejsharapov/vue-box-shadows/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245778267,"owners_count":20670682,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["box-shadow","css","frontend","vue","vuejs"],"created_at":"2024-07-31T16:01:31.968Z","updated_at":"2025-03-27T03:30:30.279Z","avatar_url":"https://github.com/andrejsharapov.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Vue Box-shadows\n\nCollection of CSS box-shadows for every taste contains [more than 100](#groups) simple, beautiful and airy shadows. Add beautiful shadow effects to your Vue project without thinking about CSS.\n\n---\n\n[![discord][discord-img]][discord]\n[![GitHub contributors][contributors-img]][contributors]\n[![npm][npm-img]][npm]\n[![download][download-img]][download]\n[![GitHub issues][issues-img]][issues]\n[![GitHub license][license-img]][license]\n\n[![GitHub watchers](https://img.shields.io/github/watchers/andrejsharapov/vue-box-shadows?style=social)][watchers]\n[![GitHub forks](https://img.shields.io/github/forks/andrejsharapov/vue-box-shadows.svg?style=social\u0026)][forks]\n[![GitHub stars](https://img.shields.io/github/stars/andrejsharapov/vue-box-shadows.svg?style=social)][stars]\n\n\u003cp align=\"center\"\u003e\n\u003cimg alt=\"vue-box-shadows\" width=\"128\" height=\"128\" src=\"https://raw.githubusercontent.com/andrejsharapov/vue-box-shadows/master/src/logo.png\"\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\nFully compatible with\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca target=\"_blank\" title=\"\" href=\"https://github.com/vuejs/vue-cli\"\u003e\n    \u003cimg width=\"65\" alt=\"vuejs\" src=\"https://cli.vuejs.org/favicon.png\"\u003e\n  \u003c/a\u003e\n  \u003ca target=\"_blank\" title=\"\" href=\"https://github.com/bootstrap-vue/bootstrap-vue\"\u003e\n    \u003cimg width=\"75\" alt=\"bootstrap-vue\" src=\"https://getbootstrap.com/docs/5.0/assets/brand/bootstrap-logo.svg\"\u003e\n  \u003c/a\u003e\n  \u003ca target=\"_blank\" title=\"\" href=\"https://github.com/tailwindlabs/tailwindcss\"\u003e\n    \u003cimg width=\"90\" alt=\"tailwindcss\" src=\"https://tailwindcss.com/_next/static/media/tailwindcss-mark.79614a5f61617ba49a0891494521226b.svg\"\u003e\n  \u003c/a\u003e\n  \u003ca target=\"_blank\" title=\"\" href=\"https://github.com/vuetifyjs/vuetify\"\u003e\n    \u003cimg width=\"75\" alt=\"vuetifyjs\" src=\"https://cdn.vuetifyjs.com/images/logos/logo.svg\"\u003e\n  \u003c/a\u003e\n  \u003ca target=\"_blank\" title=\"\" href=\"https://github.com/buefy/buefy\"\u003e\n    \u003cimg height=\"60\" alt=\"buefy\" src=\"https://buefy.org/static/img/buefy.1d65c18.png\"\u003e\n  \u003c/a\u003e\n  \u003ca target=\"_blank\" title=\"\" href=\"https://github.com/nuxt/nuxt.js\"\u003e\n    \u003cimg height=\"75\" alt=\"nuxtjs\" src=\"https://nuxtjs.org/design-kit/colored-logo.svg\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  and others...\n\u003c/p\u003e\n\n\u003e **Note**  \n\u003e You are reading the documentation for vue-box-shadows on vue 2.  \n\u003e Documentation for vue-box-shadows for vue 3 is [here](https://github.com/andrejsharapov/vue3-box-shadows).\n\n## Install\n\n```bash\n$ npm i vue-box-shadows\n# or yarn\n$ yarn add vue-box-shadows\n```\n\n## How to use\n\nTo create a basic shadow element with minimal configuration, write the following:\n\n```html\n\u003cscript\u003e\n  import Vue from \"vue\";\n  import vueBoxShadows from \"vue-box-shadows\";\n\n  Vue.use(vueBoxShadows, {\n    // options\n  });\n\n  export default {};\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cdiv v-box-shadow\u003e\n    Add beautiful shadow effects to your project without thinking about CSS.\n    Properties are supported by all modern browsers.\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\nTo use collection shadows, you need to apply **ids** or short **names** from the [groups](#groups) table.\n\n\u003e **Note**  \n\u003e Note that ids and names are used differently:\n\n```html\n\u003cscript\u003e\n  export default {\n    data: () =\u003e ({\n      items: [2, 4, 2],\n    }),\n  };\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003c!-- use name --\u003e\n  \u003cdiv v-box-shadow:neu-2\u003e\u003c/div\u003e\n\n  \u003c!-- or --\u003e\n\n  \u003c!--  use id --\u003e\n  \u003cdiv v-box-shadow=\"34\"\u003e\u003c/div\u003e\n\n  \u003c!-- use shadow ids in a loop --\u003e\n  \u003cdiv v-for=\"(item, index) in items\" :key=\"index\" v-box-shadow=\"item\"\u003e\n    {{ item }}\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\n## Groups\n\nThe entire list of shadows can be viewed **[here][1.0.4]** or separately in the table below.\n\n| Group               |   Id    | Names ($ is value/number)          | Values |    Examples    |\n| ------------------- | :-----: | ---------------------------------- | :----: | :------------: |\n| None                |    0    | `none`                             |   1    |      ---       |\n| Elevation           |  1-24   | `el-$`                             |  1-24  | [View][ex-el]  |\n| Borders             |  25-30  | `bd-$`                             |  1-6   | [View][ex-bd]  |\n| Neumorphism         |  31-39  | `neu-$` or `neu-$-i` or `neu-$-io` |  1-3   | [View][ex-neu] |\n| Axis x              |  40-45  | `ax-$`                             |  1-6   | [View][ex-ax]  |\n| Axis y              |  46-51  | `ay-$`                             |  1-6   | [View][ex-ay]  |\n| Small inner side    |  52-55  | `si-$`                             |  1-4   | [View][ex-si]  |\n| Medium inner side   |  56-59  | `mi-$`                             |  1-4   | [View][ex-mi]  |\n| Large inner side    |  60-63  | `li-$`                             |  1-4   | [View][ex-li]  |\n| Top                 |  64-69  | `t-$`                              |  1-6   |  [View][ex-t]  |\n| Bottom              |  70-75  | `b-$`                              |  1-6   |  [View][ex-b]  |\n| Right side          |  76-81  | `r-$`                              |  1-6   |  [View][ex-r]  |\n| Left side           |  82-87  | `l-$`                              |  1-6   |  [View][ex-l]  |\n| Angle: top left     |  88-93  | `tl-$`                             |  1-6   | [View][ex-tl]  |\n| Angle: top right    |  94-99  | `tr-$`                             |  1-6   | [View][ex-tr]  |\n| Angle: bottom right | 100-105 | `br-$`                             |  1-6   | [View][ex-br]  |\n| Angle: bottom left  | 106-111 | `bl-$`                             |  1-6   | [View][ex-bl]  |\n| Patterns            | 112-115 | `p-$`                              |  1-2   |      ---       |\n\n## Options\n\n| Option           | Type    | Default                          | Description                                                          |\n| ---------------- | ------- | -------------------------------- | -------------------------------------------------------------------- |\n| useClass         | Boolean | false                            | Set to `true` in order to import styles into `\u003chead\u003e` automatically. |\n| shadowBaseCustom | String  | \"0 2px 8px 0 rgb(50 50 50 / 8%)\" | Set a value for [`box-shadow`][docs] to change the default property. |\n\n### Browser compatibility\n\nProperties are supported by all modern browsers. You can find out about browser support for earlier versions on the [Can I Use][caniuse] site.\n\n## Contributing\n\nFeedback, bug reports, and pull requests are welcome. Read the detailed information about contributions in the [CONTRIBUTING.md][contributing] file.\n\n\u003e **Note** `Bug reporting`  \n\u003e If you find a bug and would like to [report it][bug-report], please make sure the request is not on the [list of known issues][bugs].\n\n## License\n\nvue-box-shadows is licensed under the MIT license. You are free to use, modify and distribute this software, as long as the copyright header is left intact.\n\n---\n\n[Installing](#install) · [Usage](#how-to-use) · [Groups](#groups) · [Options](#options)\n\n\u003cp align=\"right\"\u003e\n\u003ca href=\"#vue-box-shadows\"\u003eReturn to top\u003c/a\u003e\n\u003c/p\u003e\n\n\u003c!-- Repo --\u003e\n\n[1.0.4]: https://codesandbox.io/s/vue-box-shadows-1-0-4-mrjlvt\n[docs]: https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow\n[bugs]: https://github.com/andrejsharapov/vue-box-shadows/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc+label%3ABugfix\n[bug-report]: https://github.com/andrejsharapov/vue-box-shadows/issues/new?labels=Bug+report\u0026template=bug_report.md+\n\n\u003c!--  --\u003e\n\n[npm]: https://www.npmjs.com/package/vue-box-shadows\n[npm-img]: https://img.shields.io/npm/v/vue-box-shadows?label=npm%40latest\u0026color=c53635\n\n\u003c!--  --\u003e\n\n[download]: https://npm-stat.com/charts.html?package=vue-box-shadows\n[download-img]: https://img.shields.io/npm/dw/vue-box-shadows\n\n\u003c!--  --\u003e\n\n[license]: https://github.com/andrejsharapov/vue-box-shadows/blob/master/LICENSE\n[license-img]: https://img.shields.io/github/license/andrejsharapov/vue-box-shadows?color=23a7f2\n\n\u003c!--  --\u003e\n\n[issues]: https://github.com/andrejsharapov/vue-box-shadows/issues/\n[issues-img]: https://img.shields.io/github/issues/andrejsharapov/vue-box-shadows.svg\n\n\u003c!--  --\u003e\n\n[contributing]: https://github.com/andrejsharapov/vue-box-shadows/blob/master/CONTRIBUTING.md\n[contributors]: https://github.com/andrejsharapov/vue-box-shadows/graphs/contributors/\n[contributors-img]: https://img.shields.io/github/contributors/andrejsharapov/vue-box-shadows?color=fd7e17\n\n\u003c!--  --\u003e\n\n[discord]: https://discord.gg/XtT4Hdf3\n[discord-img]: https://img.shields.io/badge/discord-channel-5865f2.svg\n\n\u003c!-- GitHub buttons --\u003e\n\n[watchers]: https://github.com/andrejsharapov/vue-box-shadows/watchers/\n[forks]: https://github.com/andrejsharapov/vue-box-shadows/network/\n[stars]: https://github.com/andrejsharapov/vue-box-shadows/stargazers/\n\n\u003c!--Examples  --\u003e\n\n[ex-el]: https://codesandbox.io/s/v-b-s-1-0-4-elevation-w22j9h?file=/src/App.vue\n[ex-bd]: https://codesandbox.io/s/v-b-s-1-0-4-bd-merco1?file=/src/App.vue\n[ex-neu]: https://codesandbox.io/s/v-b-s-1-0-4-neumorphism-0pnb12?file=/src/App.vu\n[ex-ax]: https://codesandbox.io/s/v-b-s-1-0-4-axis-x-msdqlx?file=/src/App.vue\n[ex-ay]: https://codesandbox.io/s/v-b-s-1-0-4-axis-y-nzd9gm?file=/src/App.vue\n[ex-si]: https://codesandbox.io/s/v-b-s-1-0-4-si-rppl4t?file=/src/App.vue\n[ex-mi]: https://codesandbox.io/s/v-b-s-1-0-4-mi-pcisfe?file=/src/App.vue\n[ex-li]: https://codesandbox.io/s/v-b-s-1-0-4-li-yu3hf1?file=/src/App.vue\n[ex-t]: https://codesandbox.io/s/v-b-s-1-0-4-top-wezz49?file=/src/App.vue\n[ex-b]: https://codesandbox.io/s/v-b-s-1-0-4-bottom-t7fjxr?file=/src/App.vue\n[ex-r]: https://codesandbox.io/s/v-b-s-1-0-4-right-vjc7f1?file=/src/App.vue\n[ex-l]: https://codesandbox.io/s/v-b-s-1-0-4-left-jz580s?file=/src/App.vue\n[ex-tl]: https://codesandbox.io/s/v-b-s-1-0-4-tl-ir0icl?file=/src/App.vue\n[ex-tr]: https://codesandbox.io/s/v-b-s-1-0-4-tr-mvskqv?file=/src/App.vue\n[ex-br]: https://codesandbox.io/s/v-b-s-1-0-4-br-ktwumh?file=/src/App.vue\n[ex-bl]: https://codesandbox.io/s/v-b-s-1-0-4-bl-g231ml?file=/src/App.vue\n\n\u003c!-- Other --\u003e\n\n[caniuse]: https://caniuse.com/?search=box-shadow\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrejsharapov%2Fvue-box-shadows","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandrejsharapov%2Fvue-box-shadows","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrejsharapov%2Fvue-box-shadows/lists"}