No Preview

Sorry, but you either have no stories or none are selected somehow.

Welcome to Coursera-UI!

A reusable component library that is designed and engineered to help us build better product faster.

GithubDev flowUIMaster Sketch

Components

A collection of components categorized by complexity and mental model.

Playground

const ResponsiveH1 = withResponsiveConfig(H1)          
const Svga404Responsive = withResponsiveConfig(Svga404)

render(
  <div>
    <Button rootClassName="m-b-2"  
      type="primary" 
      label="Primary Button " 
    />
    
    <Pill label="Pill" fillColor="#EBECED" />

    <Box
      justifyContent="end"
      alignItems="center"
    >
      <div>Box</div>
      <H1>Box</H1>
        <Box
          flexDirection="column"
          alignItems="center"
        >
          Box inside Box
        </Box>
    </Box>
  
    <Collapse onChange={action('onCollapseChange')}>
      <Collapse.Panel 
        rootClassName="border-a" 
        header={<h2 className="cursor-pointer">Collapse</h2>}
      >
        <p>content...</p>
      </Collapse.Panel>
      <Collapse.Panel 
        rootClassName="border-a" 
        header={<h2 className="cursor-pointer">Collapse</h2>}
      >
        <p>content...</p>
      </Collapse.Panel>
    </Collapse>

    <ResponsiveH1
      responsiveConfig={{
        xs: { style: { fontSize: 12 } },
        sm: { style: { fontSize: 24 } },
        md: { style: { fontSize: 32 } },
        lg: { style: { fontSize: 48 } },
        xl: { style: { fontSize: 56 } },
        xxl: { style: { fontSize: 80 } },
      }}
    >
      Responsive Title Goes Here...
    </ResponsiveH1>
  </div>
)
ReferenceError: action is not defined