SwaveUI Utilities provide a powerful collection of atomic CSS classes designed to streamline styling and layout customization. With a rich set of utility-based styles, developers can quickly apply responsive design principles, spacing, typography, colors, and more—all without writing custom CSS. These utilities ensure consistency, flexibility, and efficiency, enabling seamless creation of engaging and functional web experiences.
Documentation
[](https://www.npmjs.com/package/swaveui)
[](https://www.jsdelivr.com/package/npm/swaveui)
## Features
- Mobile responsiveness is prioritized to ensure optimal performance and user experience on smaller screens.
- We utilize flexible grid system based on Flexbox and Grid layout, offering classes for different column sizes to achieve responsive designs.
- **Lightweight**: Only around 20kb gzipped, making it easy to download
- **Swave UI** defines consistent and aesthetically pleasing font styles for headings, paragraphs, and links.
- A set of predefined classes that can be used across the entire project for typography, colors
- Includes utility classes for common tasks, such as spacing (margin and padding), display properties, and visibility toggles.
- Offers utility classes that allow developers to control the visibility of elements based on different screen sizes, ensuring adaptability across devices.
- Defines a well-thought-out color palette with over 100 color spectrum, providing classes for background and text color customization.
- Supplies utility classes for controlling dimensions, borders, and border-radius, enabling efficient styling of various elements.
- Integrates media queries for different breakpoints (rp1, rp2, rp3, rp4, rp5) to optimize layouts for varying screen sizes.
- Offers comprehensive documentation with examples, making it user-friendly and easy to implement.
- Allows users to customize the framework easily by adjusting variables (e.g., colors, spacing) through a configuration file.
- Ensures compatibility with major browsers and includes appropriate vendor prefixes in styles for consistent rendering.
## Installation
### NPM
```sh
npm install swaveui-utilities
```
### Yarn
```sh
yarn install swaveui-utiltiies
```
**OR**
### IMPORT
After installation, you can import the CSS file into your project using this snippet:
```sh
import 'swaveui/dist/swaveui-utilities.min.css'
```
### CDN
[https://www.jsdelivr.com/package/npm/swaveui-utilities](https://www.jsdelivr.com/package/npm/swaveui-utilities)
## CONTRIBUTING
Please refer to the [CONTRIBUTING.md](https://github.com/toubielawbar/swaveui/blob/main/.github/CONTRIBUTING.md) for more details on contributing.
## COMMUNITY
Swave UI thrives on collaboration, feedback, and community-driven innovation. Whether you're a designer, developer, or just passionate about clean, efficient UI frameworks, you're welcome here!
Here’s how you can get involved:
- Join the Discussion
Engage with other users, ask questions, share ideas, and get help:
- Twitter / X — Stay updated on news and releases.
- Contribute
Swave UI is open-source and welcomes contributions of all kinds—bug reports, feature requests, design tweaks, or new components. See our Contributing Guide for more.
- Report Issues
Found a bug or inconsistency? Open an issue on GitHub Issues and help us improve.
- Spread the Word
Love Swave UI? Star the repo, share it on social media, or use the #SwaveUI hashtag to connect with others.
## LICENSE
swaveui is licensed under the MIT License. See the [LICENSE](https://github.com/toubielawbar/swaveui/blob/main/.github/LICENSE) file for more details.
## CONTACT
You can reach us by email at if you want to discuss more about Swave UI. [info@swaveui.com](mailto:info@swaveui.com)