BONK UI Component Library

Welcome to the BONK UI Component Library. This library is designed to streamline the development process for front-end developers working on BONK projects. It ensures consistency and adherence to BONK's branding guidelines across all digital platforms.

Example Site

https://bui.bonkinu.io/

Components

The library includes a variety of reusable components, such as:

• Badges: Use badges to highlight status or new features.
• Forms: Pre-styled form elements for user input.
• Buttons: Various button styles for different actions.
• Containers: Layout elements to structure and organize your content.
• Text: Predefined text styles for consistency.
• Headers: Styled headers for page sections.
• Footers: Standard footers for all your pages.

Usage

To use these components in your project, simply import the component from the library and include it in your code.

Just 1 Component

import { BonkBadge } from 'bonk-ui-components';

<BonkBadge
    number="420K+"
    title="holders"
    color="GRADIENT"
    size="LARGE"
/>

All Components

import * from 'bonk-ui-components';

<BonkBadge
    number="420K+"
    title="holders"
    color="GRADIENT"
    size="LARGE"
/>
<BonkFieldset title="Country" color="BLACK" id="set1">
    <BonkBullet color="BLACK" text="Turkey" name="set1"/>
    <BonkBullet color="BLACK" text="Germany" name="set1" defaultChecked={true} />
    <BonkBullet color="BLACK" text="USA" name="set1"/>
</BonkFieldset>
<BonkButton
    text="button"
    color="WHITE"
    size="SMALL"
    hoverAnimation={true}
    fullWidth={true}
/>
<BonkContainer
    color="PEACH"
    width="350px"
    title="form"
    logo={true}
    shadow={true}
>
    <BonkInput />
    <BonkText description="Descriptive text." />
    <BonkButton text="submit" />
</BonkContainer>
<BonkDate
    fullWidth={true}
    color="BLACK"
/>
<BonkFooterBody color="RED" socials={true}>
    <BonkFooterCategory title="bonk">
        <BonkFooterLink title="Foundation" link="https://bonkcoin.com/" />
        <BonkFooterLink title="Solana Mobile" link="https://bonkcoin.com/" />
        <BonkFooterLink title="Solana Pay" link="https://bonkcoin.com/" />
        <BonkFooterLink title="Grants" link="https://bonkcoin.com/" />
    </BonkFooterCategory>
    <BonkFooterCategory title="developers">
        <BonkFooterLink title="Documentation" link="https://bonkcoin.com/" />
        <BonkFooterLink title="Mobile SDK" link="https://bonkcoin.com/" />
        <BonkFooterLink title="Pay SDK" link="https://bonkcoin.com/" />
        <BonkFooterLink title="Cookbook" link="https://bonkcoin.com/" />
        <BonkFooterLink title="DAOs" link="https://bonkcoin.com/" />
    </BonkFooterCategory>
</BonkFooterBody>
<BonkInput
    title="top title text"
    description="Bottom descriptive text"
    color="MAROON"
    errorMessage="Error message"
    fullWidth={true}
/>
<BonkPattern
    width="100%"
    height="300px"
    position="ABSOLUTE"
    size={490}
    opacity={20}
    mobileTrigger={800}
    mobileMultiplicator={2.1}
/>
<BonkText
    size="LARGE"
    title="title"
    titleColor="RED"
    description="This is paragraph.<br />This is paragraph."
    descriptionColor="GRAY"
/>