radix-system

To help you get started, we’ve selected a few @modulz/radix-system examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

modulz / radix / packages / radix / src / components / Box.tsx View on Github

JustifySelfProps &amp;
  MarginProps &amp;
  MaxWidthProps &amp;
  MaxHeightProps &amp;
  MinHeightProps &amp;
  MinWidthProps &amp;
  OpacityProps &amp;
  OverflowProps &amp;
  PaddingProps &amp;
  TextAlignProps &amp;
  WidthProps &amp;
  PositionSetProps &amp;
  FlexItemSetProps &amp;
  ComponentProps&lt;'div'&gt; &amp; { as?: any };

const styleProps = compose(
  border,
  boxShadow,
  backgroundColor,
  textColor,
  display,
  height,
  justifySelf,
  margin,
  maxHeight,
  maxWidth,
  minHeight,
  minWidth,
  opacity,
  overflow,
  padding,
  textAlign,

modulz / radix / packages / radix / src / components / GhostButton.tsx View on Github

import styled from 'styled-components';
import css from '@styled-system/css';
import { margin, MarginProps, padding, PaddingProps, variant, compose } from '@modulz/radix-system';
import themeGet from '@styled-system/theme-get';

type GhostButtonProps = MarginProps &amp;
  PaddingProps &amp; {
    isActive?: Boolean;
  };

const styleProps = compose(
  margin,
  padding
);

export const GhostButton = styled.button(
  props =&gt;
    css({
      appearance: 'none',
      backgroundColor: 'transparent',
      border: 'none',
      borderRadius: 9999,
      color: 'gray800',
      display: 'inline-flex',
      flexShrink: 0,
      alignItems: 'center',
      fontFamily: 'normal',

How to use the @modulz/radix-system.compose function in @modulz/radix-system

To help you get started, we’ve selected a few @modulz/radix-system examples, based on popular ways it is used in public projects.

@modulz/radix-system

Package Health Score

Popular @modulz/radix-system functions

Similar packages