# qwik-dessert

> Box component and styled function for Qwik and Vanilla Extract.

Latest version **0.0.8** (published 2023-10-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install qwik-dessert
pnpm add qwik-dessert
yarn add qwik-dessert
bun add qwik-dessert
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.8 |
| Published | 2023-10-12 |
| First published | 2023-08-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=15.0.0 |
| Dependencies | 2 |
| Unpacked size | 153.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | brandonpittman |

## Links

- npm: https://www.npmjs.com/package/qwik-dessert
- npm.io page: https://npm.io/package/qwik-dessert

## Dependencies (2)

- [@dessert-box/core](https://npm.io/package/@dessert-box/core.md) ^0.2.0
- [@vanilla-extract/css](https://npm.io/package/@vanilla-extract/css.md) ^1.12.0

## Recent versions

- 0.0.8 (latest) — 2023-10-12
- 0.0.7 — 2023-08-15
- 0.0.6 — 2023-08-15
- 0.0.5 — 2023-08-15
- 0.0.3 — 2023-08-15
- 0.0.2 — 2023-08-15

## README

# Qwik Dessert 🍰

## Install

`npm install qwik-dessert`

## Usage

This module provides two functions:

- `createBox`
- `styled`

### `createBox`

This function creates a box component that uses your Vanilla Extract Sprinkles.

Create a box component like this:

```ts
import { createBox } from "qwik-dessert";
import { atoms } from "~/styles/atoms.css";
// atoms being the sprinkles you created

export const Box = createBox({ atoms });
```

Then, you can use your box component:

```tsx
<Box
  as="button"
  backgroundColor="primary"
  color="inverted"
  __border="none"
  __borderRadius="4px"
>
  Click me
</Box>
```

You can use your sprinkles values or you can use any CSS property as an escape hatch by prefixing the property with `__`.

### `styled`

Unlike the `styled-vanilla-extract` module for Qwik, our `styled` function is a bit simpler. We require a string value for a tag name and then a Vanilla Extract style object. We do not support a legacy Styled Components call like `styled.button`.

Use it like so:

```ts
import { styled } from "qwik-dessert";

export const Button = styled("button", {
  backgroundColor: "blue",
  color: "white",
  borderRadius: 4,
  border: "none",
});
```

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