Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/milandekruijf/pandacss-preset-space
More 🐼 PandaCSS space utilities
https://github.com/milandekruijf/pandacss-preset-space
chakra-ui css pandacss preset space spacing styling
Last synced: about 1 month ago
JSON representation
More 🐼 PandaCSS space utilities
- Host: GitHub
- URL: https://github.com/milandekruijf/pandacss-preset-space
- Owner: milandekruijf
- License: mit
- Created: 2023-07-20T17:51:13.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-07-21T09:24:15.000Z (over 1 year ago)
- Last Synced: 2024-04-25T03:02:26.217Z (9 months ago)
- Topics: chakra-ui, css, pandacss, preset, space, spacing, styling
- Language: TypeScript
- Homepage: https://panda-css.com
- Size: 66.4 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[![Downloads][npm-shield]][npm-url]
[![Contributors][contributors-shield]][contributors-url]
[![Forks][forks-shield]][forks-url]
[![Stargazers][stars-shield]][stars-url]
[![Issues][issues-shield]][issues-url]
[![MIT License][license-shield]][license-url]
[![LinkedIn][linkedin-shield]][linkedin-url]
# More 🐼 PandaCSS space utilities
Add the missing `spaceX` and `spaceY` utilities to [🐼 PandaCSS](https://panda-css.com/).
## Installation
```bash
npm install --save-dev pandacss-preset-space
```
## Usage
Add the preset to your PandaCSS configuration (`panda.config.ts`)
```ts
import { defineConfig } from "@pandacss/dev";
// Import the preset. The name can be anything you want
import spacePreset from "pandacss-preset-space";
export default defineConfig({
presets: [
spacePreset,
// Re-add the panda preset if you want to keep
// the default keyframes, breakpoints, tokens
// and textStyles provided by PandaCSS
"@pandacss/preset-panda",
],
});
```
You can now use the `spaceX` and `spaceY` utilities within your styles. The values are based on the `spacing` tokens you can set in your 🐼 PandaCSS configuration.
`spaceX` adds a margin to the left of every child element except the first one. `spaceY` adds a margin to the top of every child element except the first one.
```tsx
export function Page() {
return (
Hello
World
);
}
```
## Attributions
- [Chakra](https://github.com/chakra-ui) team for creating [🐼 PandaCSS](https://panda-css.com/)
[contributors-shield]: https://img.shields.io/github/contributors/milandekruijf/pandacss-preset-space.svg?style=for-the-badge
[contributors-url]: https://github.com/milandekruijf/pandacss-preset-space/graphs/contributors
[forks-shield]: https://img.shields.io/github/forks/milandekruijf/pandacss-preset-space.svg?style=for-the-badge
[forks-url]: https://github.com/milandekruijf/pandacss-preset-space/network/members
[stars-shield]: https://img.shields.io/github/stars/milandekruijf/pandacss-preset-space.svg?style=for-the-badge
[stars-url]: https://github.com/milandekruijf/pandacss-preset-space/stargazers
[issues-shield]: https://img.shields.io/github/issues/milandekruijf/pandacss-preset-space.svg?style=for-the-badge
[issues-url]: https://github.com/milandekruijf/pandacss-preset-space/issues
[license-shield]: https://img.shields.io/github/license/milandekruijf/pandacss-preset-space.svg?style=for-the-badge
[license-url]: https://github.com/milandekruijf/pandacss-preset-space/blob/main/LICENSE
[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge&logo=linkedin&colorB=555
[linkedin-url]: https://www.linkedin.com/in/milandekruijf
[npm-shield]: https://img.shields.io/npm/dw/pandacss-preset-space?style=for-the-badge
[npm-url]: https://www.npmjs.com/package/pandacss-preset-space