<div align="center"> <img alt="Owner avatar" src="https://vue-styled-components.com/logo.png" width="220px" /> <h1>Vue Styled Components</h1> A CSS tool similar to styled-components and support for vue 3. Help you to develop your apps fastly!
npm install @vue-styled-components/core
[![CI status][github-action-image]][github-action-url]
[![NPM version][npm-version]][npm-url]
[![minified size][npm-bundle-size]][npm-url]
[![Coverage Status][coverage]][codecov-url]
[![chat on discord][discord]][discord-url]
[github-action-image]: https://github.com/vue-styled-components/core/workflows/Code%20Check/badge.svg
[github-action-url]: https://github.com/vue-styled-components/core/actions/workflows/code-check.yml
[npm-version]: https://img.shields.io/npm/v/%40vue-styled-components%2Fcore
[npm-bundle-size]: https://img.shields.io/bundlejs/size/%40vue-styled-components%2Fcore
[npm-url]: http://npmjs.org/package/@vue-styled-components/core
[coverage]: https://coveralls.io/repos/github/vue-styled-components/core/badge.svg?branch=main
[codecov-url]: https://coveralls.io/github/vue-styled-components/core?branch=main
[discord]: https://img.shields.io/badge/chat-on%20discord-7289da.svg?sanitize=true
[discord-url]: https://discord.gg/UbJxnvt2UH
✅ Component Styling - Style Vue components, styled components, and HTML elements
✅ Props & Attrs - Pass props, set default attributes, and override attrs dynamically
✅ Theming System - Built-in theme provider with nested theme support
✅ Performance Optimized - Smart caching, batch updates, and async processing
✅ CSS Features - Keyframes, global styles, CSS mixins, and nesting support
✅ Tailwind Integration - Seamless Tailwind CSS class integration
✅ Plugin System - Extensible plugin architecture with hooks
✅ Developer Experience - TypeScript support, performance monitoring, and auto-prefixing
✅ Production Ready - Optimized for performance with configurable caching and batching
For detailed introduction and usage instructions, please refer to the documentation website
``sh`
npm i @vue-styled-components/core
`sh`
yarn add @vue-styled-components/core
`sh``
pnpm i @vue-styled-components/core
Get started quickly with our comprehensive documentation and examples:
👉 Visit Documentation Website 👈
The documentation includes:
- 📚 Complete API reference
- 🎯 Step-by-step tutorials
- 💡 Best practices and patterns
- 🔧 Configuration options
- 🎨 Advanced theming guide
- ⚡ Performance optimization tips