How to use @modulz/radix-system - 7 common examples

import React from 'react';
import styled from 'styled-components';
import css from '@styled-system/css';
import omit from 'lodash.omit';
import pick from 'lodash.pick';
import { margin, MarginProps } from '@modulz/radix-system';

export type CheckboxButtonProps = MarginProps &
  React.ComponentPropsWithRef<'input'> & { children: React.ReactNode };

const marginPropNames = margin.propNames;

export const CheckboxButton = React.forwardRef(
  ({ children, ...props }, forwardedRef) => {
    const marginProps = pick(props, marginPropNames);
    const inputProps = omit(props, marginPropNames);

    return (
      
        <input type="checkbox">
        {children}
      
    );
  }
);

const CheckboxWrapper = styled('label')(

import React, { FC, ComponentProps } from 'react';
import styled from 'styled-components';
import css from '@styled-system/css';
import omit from 'lodash.omit';
import pick from 'lodash.pick';
import { margin, MarginProps } from '@modulz/radix-system';
import themeGet from '@styled-system/theme-get';

export type SwitchProps = MarginProps & ComponentProps<'input'>;

const marginPropNames = margin.propNames;

export const Switch: FC = ({ children, ...props }) => {
  const marginProps = pick(props, marginPropNames);
  const inputProps = omit(props, marginPropNames);

  return (
    
      <input type="checkbox">
      
    
  );
};

const SwitchWrapper = styled('label')(
  css({
    position: 'relative',

const isControlled = Boolean(value);

  return (
    <div>
      {React.Children.map(children, (radio: ReactElement) =&gt;
        React.cloneElement(radio, {
          name,
          onChange,
          ...(isControlled ? { checked: value === radio.props.value } : {}),
        })
      )}
    </div>
  );
};

const marginPropNames = margin.propNames;

type Ref = HTMLInputElement;
export type RadioProps = MarginProps &amp; ComponentPropsWithRef&lt;'input'&gt;;

export const Radio: FC = forwardRef((props, forwardedRef) =&gt; {
  const { children, ...otherProps } = props;
  const systemProps = pick(otherProps, marginPropNames);
  const inputProps = omit(otherProps, marginPropNames);

  return (
    
      <input type="radio">
      
      {children &amp;&amp; {children}}
    
  );

import React, { ComponentProps } from 'react';
import styled from 'styled-components';
import css from '@styled-system/css';
import omit from 'lodash.omit';
import pick from 'lodash.pick';
import { margin, MarginProps } from '@modulz/radix-system';

export type CheckboxProps = MarginProps & ComponentProps<'input'>;

const marginPropNames = margin.propNames;

export const Checkbox = React.forwardRef(
  ({ children, ...props }, forwaredRef) => {
    const marginProps = pick(props, marginPropNames);
    const inputProps = omit(props, marginPropNames);

    return (
      
        <input type="checkbox">
        

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

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

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 &
  PaddingProps & {
    isActive?: Boolean;
  };

const styleProps = compose(
  margin,
  padding
);

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

import React, { FC, ReactElement } from 'react';
import styled from 'styled-components';
import { MarginProps, system, Prop } from '@modulz/radix-system';
import themeGet from '@styled-system/theme-get';
import css from '@styled-system/css';
import * as CSS from 'csstype';
import { transparentize } from 'polished';
import { Box } from './Box';

const pillWidth = system({
  pillWidth: {
    property: 'width',
  },
});

interface PillWidthProps {
  pillWidth?: Prop>;
}

export type PillNavProps = MarginProps &
  PillWidthProps & {
    children: ReactElement[];
  };

export const PillNav: FC = ({ children, pillWidth, ...props }) => {
  return (