# shapla-css

> Apply helper classes to almost any element, in order to alter their style.

Latest version **2.7.3** (published 2026-04-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install shapla-css
pnpm add shapla-css
yarn add shapla-css
bun add shapla-css
```

## Health

**Score 50/100 (C)** — status: active.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

## Facts

| | |
|---|---|
| Version | 2.7.3 |
| Published | 2026-04-13 |
| First published | 2020-11-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 401.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | sayful |
| Keywords | shapla-css, css-utility |

## Links

- npm: https://www.npmjs.com/package/shapla-css
- Repository: https://github.com/sayful1/shapla-css
- Homepage: https://github.com/sayful1/shapla-css#readme
- Issues: https://github.com/sayful1/shapla-css/issues
- npm.io page: https://npm.io/package/shapla-css

## Alternatives

- [lodash.assign](https://npm.io/package/lodash.assign.md) — 2.3M weekly downloads
- [lodash.chunk](https://npm.io/package/lodash.chunk.md) — 1.8M weekly downloads
- [react-native-ios-utilities](https://npm.io/package/react-native-ios-utilities.md) — 138.5K weekly downloads
- [@technically/lodash](https://npm.io/package/@technically/lodash.md) — 50.9K weekly downloads
- [@fluid-topics/ft-icon](https://npm.io/package/@fluid-topics/ft-icon.md) — 20.6K weekly downloads

## Recent versions

- 2.7.3 (latest) — 2026-04-13
- 2.7.2 — 2025-12-28
- 2.7.1 — 2025-11-10
- 2.7.0 — 2025-11-10
- 2.6.7 — 2024-03-22
- 2.6.6 — 2024-03-19
- 2.6.4 — 2024-03-17
- 2.6.3 — 2023-12-07
- 2.6.2 — 2023-11-27
- 2.6.1 — 2023-04-15
- 2.6.0 — 2023-01-10
- 2.5.0 — 2021-11-19
- 2.4.0 — 2021-11-08
- 2.3.0 — 2021-10-29
- 2.2.0 — 2021-10-05
- … 5 more at https://npm.io/package/shapla-css/versions

## README

# Shapla CSS

Apply helper classes to almost any element, in order to alter their style.

> This document is incomplete. Feel free to improve this document.

## Why?

We need some prebuild components that are easy to customize and easy to manage.
Most of the components are modified version from [Bulma](https://bulma.io) and [Material Design Lite](https://getmdl.io)
components. We use these css class to build React, Vue and Web components.

## Features

* Easy color customization via SCSS or CSS custom property.
* All elements/components are exported via SCSS mixin, so you can use only what you need.

## Table of contents

- [Installation](#installation)
- [Usage](#usage)

### Installation

```
npm install --save shapla-css
```

### Usage

#### Color Theme Customization

```scss
// file style.scss
@use "shapla-css/src/index.scss" as shapla with (
  $color--primary: #00d1b2;

$color--secondary: #9c27b0;
$color--success: #48c774;
$color--error: #f14668;
$color--warning: #ffdd57;
)
;

@include shapla.button;
@include shapla.checkbox;
@include shapla.data-table;
// include other components as your requirement 
```

Check all available SCSS mixins from [shapla.scss](/src/shapla.scss) file.

## List of Components

**Elements**: do not have nested element. Mostly one css class with modifier css class.

* Badge
* Box Shadow
* [Button](/src/elements/button/README.md)
* Cross/Delete Icon
* Icon Container
* Image Container

**Components** have multiple nested element.

* [Chip](/src/components/chip/README.md)
* [Dashboard](/src/components/dashboard/README.md)
* [Data Table](/src/components/data-table/README.md)
* [Dropdown](/src/components/dropdown/README.md)
* File Uploader
* [Modal](/src/components/modal/README.md)
* Notification
* Pagination
* Popover
* Progress Bar
* [Sidenav](/src/components/sidenav/README.md)
* Spinner
* [Tabs](/src/components/tabs/README.md)
* Toggles
* Tooltip

**Grid System**

* [Columns](/src/layout/grid/README.md)

**Form Elements**

* [Checkbox](/src/form/checkbox/README.md)
* Radio
* Search
* Select
* Range Slider
* Star Rating
* Switch
* Text Field

**Utilities**

* Screen Reader Only
* Mini reset

## List of Components support dark mode

* Cross/Delete Icon
* Spinner
* Modal

| Component         | Dark Theme | Comment                    |
|-------------------|------------|----------------------------|
| Columns           | -          | Not related to color theme |
| Cross/Delete Icon | ✅          |                            |
| Spinner           | ✅          |                            |
| Modal             | ✅          |                            |

---
_Source: https://npm.io/package/shapla-css · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._