How to expose a complex Component

The Checklist component, for example, exposes two React Components:

• The container
• The item

The container is the Checklist in itself, while the item is a component to be used inside the Checklist. The Checklist is considered the Main component, while the item is exposed simply as Item. For example:

export function Main () { }

export function Item () { }

And then to consume it:

import * as Checklist from '@klarna/ui/Checklist'

function View () {
  return (
    <Checklist.Main>
      <Checklist.Item>First</Checklist.Item>
      <Checklist.Item>Second</Checklist.Item>
    </Checklist.Main>
  )
}

This makes it easy for consumers interested in only part of a component to do tree shaking for a small build size and gives a simple convention for how to expose components with complex structures.