Yet Another LCARS UI

start with a frame and specify the sides that should be visible:

<Frame top left bottom right></Frame>

Width is 100% by default and as small as needed, just like a <div> element. You can add optional width and height attributes, a custom className or style to adjust this

Content goes inside the frame:

<Frame top left bottom height={400}>
    Content here
</Frame>

To add buttons to a side of the frame, use the specialized <Left>, <Top>, <Right> and <Bottom> elements together with <Button> and <Filler> elements

<Frame left top bottom height={400}>
    <Left>
        <Button>Engage</Button>
        <Filler flex />
    </Left>
    content here
</Frame>

For the frame, you can also adjust the border, innerRadius, outerRadius and className attributes. For the last one, the following color pallettes are available:

• lcars-tng
• lcars-voy
• lcars-pic
• lcars-alert
• lcars-alert-strobe
• lcars-yellow
• lcars-blue
• lcars-lavender
• lcars-gray

You can use nested <Frame>s for additional effect:

<Frame
    left
    top
    height={400}
    className="lcars-gray"
    border={[4, 100]}
    outerradius={20}
    innerradius={16}
>
    <Left>
        <Button>Engage</Button>
        <Filler flex />
    </Left>
    <Frame left top border={2} innerradius={12} outerradius={12} flex>
        <Frame
            right
            bottom
            border={[12, 24]}
            flex
            innerradius={48}
            outerradius={64}
        >
            content here
        </Frame>
    </Frame>
</Frame>