Loading
NEB_LENGTH is the length scale the library uses for spacing and sizes. Import it to keep padding, margin, gap and sizes consistent across your app, in component props and in your own styles alike. It is not a limit: length props accept any CSS value, so you can step outside the scale whenever you need to.
import { Box, NEB_LENGTH } from '@nebula-kit/core' export const Card = ({ children }) => ( <Box p={NEB_LENGTH.px_024} rowGap={NEB_LENGTH.px_012} display="flex" flexDirection="column"> {children} </Box>) export const Banner = () => ( // your own styles and any CSS value work too <div style={{ marginBlock: NEB_LENGTH.px_048 }}> <Box p="20px" inlineSize="50%">...</Box> </div>)| Name | Value |
|---|---|
px_000 | 0px |
px_002 | 2px |
px_004 | 4px |
px_006 | 6px |
px_008 | 8px |
px_012 | 12px |
px_016 | 16px |
px_020 | 20px |
px_024 | 24px |
px_032 | 32px |
px_048 | 48px |
px_064 | 64px |
px_096 | 96px |
px_128 | 128px |
px_192 | 192px |
px_256 | 256px |
px_384 | 384px |
px_512 | 512px |