Margo UI

React component kit built on Tailwind CSS v4, with compound components and overridable CSS tokens.

What is it?

It's the component kit I build my own projects with, this one included. Most components are compound: a root you render, and parts you mount inside it. There are no switches for what a component shows: if a part is in the JSX, it renders.

tsx

<Header>
  <Header.Title>Settings</Header.Title>
  <Header.Trailing>
    <Button aria-label="close" onClick={close}>
      <Button.Icon><MdClose /></Button.Icon>
    </Button>
  </Header.Trailing>
</Header>

Settings

install it