Nuptial Predicament Mediation


    1.0.0-5 • Public • Published

    npm version tests

    Docs // Getting Started // ReScript Brazil Community

    ⚠️ DISCLAIMER: This library is still beta, you can check our roadmap here. We're trying to keep the breaking changes to a minimum whereever possible, but some breaking changes might happen until we release the v1.0.0.


    Ancestor is a suite of components that works as layout primitives to develop high-quality web apps, design systems, and style guides focused on responsiveness.

    What and Why?

    Every front-end project that is using libraries based on components like React, faces the same situation: Choose or develop a UI library to develop the interfaces.

    In some cases, you can use libraries like Chakra UI, Material UI, or Ant Design that delivers a set of styled components (grids, buttons, inputs, selects, etc) and a lot of other utility functions and components for your web app.

    However, in some cases, the team needs to create its own design system or style guide with a design language, colors, fonts, buttons, inputs and other specifications created by a design team. In this case, the usage of a library like Material UI or Chakra UI might not be the best choice, because depends on a lot of customizations or changes to adapt the library to the design specification.

    It was the reason that we created Ancestor: to act as a foundation for your project or design system.


    Unstyled 💀

    Different from popular libraries like Material UI, we don't deliver styled components with colors, fonts, borders, etc. All Ancestor's components are layout primitives with support to a lot of CSS properties like padding, margin, height, width, etc.

    Responsiveness 💡

    All properties from Ancestor's components are responsive, which makes it easy to develop interfaces that need to support multiple devices. Through the breakpoints defined by the library, you can change the appearance of a component in a specific device or screen size.

    Consistent design 🎨

    We don't deliver styled components, but we care about design consistency, especially when dealing with spacing, borders, etc.

    Customizable ⚙️

    All properties from Ancestor's components and parameters are customizable: Breakpoints, spacing, radius, grid columns, etc which makes it easy to customize and adapt Ancestor to your design system or style guide.


    First off, install Ancestor using npm/yarn:

    yarn add @rescriptbr/ancestor

    If you want to use the default setup, you need to install Emotion.

    yarn add @emotion/css

    Add the package to bs-dependencies in your bsconfig.json:

    "bs-dependencies": [

    Basic usage

    open Ancestor.Default
    let make = () => {
      <Grid height=[#xs(100.0->#pct)]>
          flexDirection=[#xs(#column), #md(#row)]
          p=[xxs(6), md(12), lg(8)]
          columns=[#xs(#12), #md(#6)]
            width=[#xs(15.0->#rem), #md(20.0->#rem)]
            <Logo />
          <Box flexGrow=[#xs(#num(3.0))] pt=[xxs(4)]>
              {"A place to share knowledge"->React.string}
              {"Where good ideas find you."->React.string}

    Example from ReScript Conduit


    Check out the official documentation.




    npm i @rescriptbr/ancestor

    DownloadsWeekly Downloads






    Unpacked Size

    107 kB

    Total Files


    Last publish


    • matdsoupe
    • vmarcosp
    • fakenickels
    • diogomqbm