Konsta UI React

https://konstaui.com/react
Admin
Konsta UI React is a free and open-source mobile UI components framework built with Tailwind CSS,...
Tokens:67,179
Snippets:424
Trust Score:8.1
Update:3 months ago
Show doc for...
Tokens:
Raw
### Run Konsta UI React Kitchen Sink

Source: https://konstaui.com/react/kitchen-sink

Launch the Konsta UI React Kitchen Sink application locally. This command starts the development server and makes the examples accessible.

```bash
npm run react
```

--------------------------------

### Progressbar Examples

Source: https://konstaui.com/react/progressbar

Examples demonstrating how to use the Progressbar component with different progress values and color customizations.

```APIDOC
## Examples

### Determinate Progress Bar

This example shows a determinate progress bar where the progress can be controlled using buttons.

```jsx
import React, { useState } from 'react';
import {
  Page,
  Navbar,
  Block,
  BlockTitle,
  Progressbar,
  Segmented,
  SegmentedButton,
} from 'konsta/react';

export default function ProgressbarPage() {
  const [progress, setProgress] = useState(0.1);
  return (
    <Page>
      <Navbar title="Progressbar" />
      <BlockTitle>Determinate Progress Bar</BlockTitle>
      <Block strong inset>
        <div className="my-4">
          <Progressbar progress={progress} />
        </div>
        <Segmented roundedIos strongIos outlineMaterial>
          <SegmentedButton
            active={progress === 0.1}
            onClick={() => setProgress(0.1)}
          >
            10%
          </SegmentedButton>
          <SegmentedButton
            active={progress === 0.3}
            onClick={() => setProgress(0.3)}
          >
            30%
          </SegmentedButton>
          <SegmentedButton
            active={progress === 0.5}
            onClick={() => setProgress(0.5)}
          >
            50%
          </SegmentedButton>
          <SegmentedButton
            active={progress === 1.0}
            onClick={() => setProgress(1.0)}
          >
            100%
          </SegmentedButton>
        </Segmented>
      </Block>
    </Page>
  );
}
```

### Colors

This example demonstrates how to apply different colors to the progress bar using Tailwind CSS classes.

```jsx
import React from 'react';
import {
  Page,
  Navbar,
  Block,
  BlockTitle,
  Progressbar,
} from 'konsta/react';

export default function ProgressbarPage() {
  return (
    <Page>
      <Navbar title="Progressbar" />
      <BlockTitle>Colors</BlockTitle>
      <Block strong inset className="space-y-4">
        <Progressbar className="k-color-brand-red" progress={0.25} />
        <Progressbar className="k-color-brand-green" progress={0.5} />
        <Progressbar className="k-color-brand-yellow" progress={0.75} />
        <Progressbar className="k-color-brand-purple" progress={1} />
      </Block>
    </Page>
  );
}
```
```

--------------------------------

### Basic Konsta UI App Component Setup in React

Source: https://konstaui.com/react/app

Demonstrates the basic setup of the Konsta UI App component as the main root component in a React application. Ensure only one App component is used globally.

```jsx
import React from 'react';
import { App } from 'konsta/react';

export default function MyApp() {
  return (
    <>
      {/* App component ideally should be the main root component */}
      <App theme="ios" safeAreas>
        {/* rest of Konsta UI components */}
      </App>
    </>
  );
}
```

--------------------------------

### Install Konsta UI Package

Source: https://konstaui.com/react/installation

Install the Konsta UI library using npm. This is the first step after setting up your React and Tailwind CSS project.

```bash
npm i konsta
```

--------------------------------

### Install Dependencies

Source: https://konstaui.com/react/kitchen-sink

Install the necessary dependencies for the Konsta UI React project. This command is typically run in the project's root directory.

```bash
npm install
```

--------------------------------

### List Button Examples

Source: https://konstaui.com/react/list-button

Demonstrates the usage of the ListButton component within a List. Includes examples with default styling, inset lists, and custom colors.

```jsx
import React from 'react';
import { Page, Navbar, NavbarBackLink, List, ListButton } from 'konsta/react';


export default function ListButtonPage() {
  return (
    <Page>
      <Navbar
        title="List Button"
        />


      <List strong outlineIos>
        <ListButton>Button 1</ListButton>
        <ListButton>Button 2</ListButton>
        <ListButton>Button 3</ListButton>
      </List>


      <List inset strong>
        <ListButton>Button 1</ListButton>
        <ListButton>Button 2</ListButton>
        <ListButton>Button 3</ListButton>
      </List>
      <List inset strong>
        <ListButton className="k-color-brand-red">Red Button</ListButton>
      </List>
    </Page>
  );
}
```

--------------------------------

### React Popover Example

Source: https://konstaui.com/react/popover

This example demonstrates how to implement a basic Popover component in React using Konsta UI. It shows how to manage the popover's visibility and attach it to different elements like buttons, links, and navbar items.

```jsx
import React, { useRef, useState } from 'react';
import {
  Page,
  Navbar,
  NavbarBackLink,
  Popover,
  Block,
  Link,
  Button,
  List,
  ListItem,
} from 'konsta/react';


export default function PopoverPage() {
  const [popoverOpened, setPopoverOpened] = useState(false);
  const popoverTargetRef = useRef(null);


  const openPopover = (targetRef) => {
    popoverTargetRef.current = targetRef;
    setPopoverOpened(true);
  };


  return (
    <Page>
      <Navbar
        title="Popover"
        right={
          <Link
            className="popover-navbar-link"
            onClick={() => openPopover('.popover-navbar-link')}
          >
            Popover
          </Link>
        }
      />
      <Block strong inset className="space-y-4">
        <Button
          rounded
          className="popover-button"
          onClick={() => openPopover('.popover-button')}
        >
          Open popover on me
        </Button>
      </Block>
      <Block strong inset className="space-y-4">
        <p>
          Mauris fermentum neque et luctus venenatis. Vivamus a sem rhoncus, 
          ornare tellus eu, euismod mauris. In porta turpis at semper convallis.
          Duis adipiscing leo eu nulla lacinia, quis rhoncus metus condimentum.
          Etiam nec malesuada nibh. Maecenas quis lacinia nisl, vel posuere
          dolor. Vestibulum condimentum, nisl ac vulputate egestas, neque enim
          dignissim elit, rhoncus volutpat magna enim a est. Aenean sit amet
          ligula neque. Cras suscipit rutrum enim. Nam a odio facilisis,
          elementum tellus non, 
          <Link
            className="popover-link-1"
            onClick={() => openPopover('.popover-link-1')}
          >
            popover
          </Link>
           tortor. Pellentesque felis eros, dictum vitae lacinia quis, lobortis
          vitae ipsum. Cras vehicula bibendum lorem quis imperdiet.
        </p>
        <p>
          In hac habitasse platea dictumst. Etiam varius, ante vel ornare
          facilisis, velit massa rutrum dolor, ac porta magna magna lacinia
          nunc. Curabitur 
          <Link
            className="popover-link-2"
            onClick={() => openPopover('.popover-link-2')}
          >
            popover!
          </Link>
           cursus laoreet. Aenean vel tempus augue. Pellentesque in imperdiet
          nibh. Mauris rhoncus nulla id sem suscipit volutpat. Pellentesque ac
          arcu in nisi viverra pulvinar. Nullam nulla orci, bibendum sed ligula 
          non, ullamcorper iaculis mi. In hac habitasse platea dictumst.
          Praesent varius at nisl eu luctus. Cras aliquet porta est. Quisque
          elementum quis dui et consectetur. Cum sociis natoque penatibus et
          magnis dis parturient montes, nascetur ridiculus mus. Sed sed laoreet
          purus. Pellentesque eget ante ante.
        </p>
        <p>
          Duis et ultricies nibh. Sed facilisis turpis urna, ac imperdiet erat
          venenatis eu. Proin sit amet faucibus tortor, et varius sem. Etiam
          vitae lacinia neque. Aliquam nisi purus, interdum in arcu sed,
          ultrices rutrum arcu. Nulla mi turpis, consectetur vel enim quis,
          facilisis viverra dui. Aliquam quis convallis tortor, quis semper
          ligula. Morbi ullamcorper 
          <Link
            className="popover-link-3"
            onClick={() => openPopover('.popover-link-3')}
          >
            one more popover
          </Link>
           massa at accumsan. Etiam purus odio, posuere in ligula vitae, viverra
          ultricies justo. Vestibulum nec interdum nisi. Aenean ac consectetur
          velit, non malesuada magna. Sed pharetra vehicula augue, vel venenatis
          lectus gravida eget. Curabitur lacus tellus, venenatis eu arcu in,
          interdum auctor nunc. Nunc non metus neque. Suspendisse viverra lectus
          sed risus aliquet, vel accumsan dolor feugiat.
        </p>
      </Block>


      <Popover
        opened={popoverOpened}
        target={popoverTargetRef.current}
        onBackdropClick={() => setPopoverOpened(false)}
      >
        <List nested>
          <ListItem
            title="Item 1"
            link
            onClick={() => setPopoverOpened(false)}
          />
          <ListItem
            title="List Item 2"
            link
            onClick={() => setPopoverOpened(false)}
          />
          <ListItem
            title="Item 3"
            link
            onClick={() => setPopoverOpened(false)}
          />
          <ListItem
            title="List Item 4"
            link
            onClick={() => setPopoverOpened(false)}
          />
          <ListItem
            title="Item 5"
            link
            onClick={() => setPopoverOpened(false)}
          />
        </List>
      </Popover>
    </Page>
  );
}
```

--------------------------------

### Contacts List Example

Source: https://konstaui.com/react/contacts-list

Demonstrates how to create a contacts list using List and List Item components. Use this for displaying organized lists of contacts.

```jsx
import React from 'react';
import {
  Page,
  Navbar,
  NavbarBackLink,
  List,
  ListGroup,
  ListItem,
} from 'konsta/react';


export default function ContactsListPage() {
  return (
    <Page>
      <Navbar
        title="Contacts List"
        />
      <List strongIos>
        <ListGroup dividers={false}>
          <ListItem title="A" groupTitle contacts />
          <ListItem title="Aaron" contacts />
          <ListItem title="Abbie" contacts />
          <ListItem title="Adam" contacts />
          <ListItem title="Adele" contacts />
          <ListItem title="Agatha" contacts />
          <ListItem title="Agnes" contacts />
          <ListItem title="Albert" contacts />
          <ListItem title="Alexander" contacts />
        </ListGroup>
        <ListGroup dividers={false}>
          <ListItem title="B" groupTitle contacts />
          <ListItem title="Bailey" contacts />
          <ListItem title="Barclay" contacts />
          <ListItem title="Bartolo" contacts />
          <ListItem title="Bellamy" contacts />
          <ListItem title="Belle" contacts />
          <ListItem title="Benjamin" contacts />
        </ListGroup>
        <ListGroup dividers={false}>
          <ListItem title="C" groupTitle contacts />
          <ListItem title="Caiden" contacts />
          <ListItem title="Calvin" contacts />
          <ListItem title="Candy" contacts />
          <ListItem title="Carl" contacts />
          <ListItem title="Cherilyn" contacts />
          <ListItem title="Chester" contacts />
          <ListItem title="Chloe" contacts />
        </ListGroup>
        <ListGroup dividers={false}>
          <ListItem title="V" groupTitle contacts />
          <ListItem title="Vladimir" contacts />
        </ListGroup>
      </List>
    </Page>
  );
}
```

--------------------------------

### Basic Data Table Example

Source: https://konstaui.com/react/data-table

Demonstrates a simple data table with headers and rows. Ensure the parent container has overflow handling for responsiveness.

```jsx
import React from 'react';
import {
  Page,
  Block,
  Navbar,
  NavbarBackLink,
  BlockTitle,
  Card,
  Table,
  TableHead,
  TableBody,
  TableCell,
  TableRow,
} from 'konsta/react';


export default function DataTablePage() {
  return (
    <Page>
      <Navbar
        title="Data Table"
        />
      <BlockTitle>Plain table</BlockTitle>
      <Block className="overflow-x-auto !pl-safe !pr-safe">
        <Table>
          <TableHead>
            <TableRow header>
              <TableCell header>Dessert (100g serving)</TableCell>
              <TableCell header className="text-right">
                Calories
              </TableCell>
              <TableCell header className="text-right">
                Fat (g)
              </TableCell>
              <TableCell header className="text-right">
                Carbs
              </TableCell>
              <TableCell header className="text-right">
                Protein (g)
              </TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            <TableRow>
              <TableCell>Frozen yogurt</TableCell>
              <TableCell className="text-right">159</TableCell>
              <TableCell className="text-right">6.0</TableCell>
              <TableCell className="text-right">24</TableCell>
              <TableCell className="text-right">4.0</TableCell>
            </TableRow>
            <TableRow>
              <TableCell>Ice cream sandwich</TableCell>
              <TableCell className="text-right">237</TableCell>
              <TableCell className="text-right">9.0</TableCell>
              <TableCell className="text-right">37</TableCell>
              <TableCell className="text-right">4.4</TableCell>
            </TableRow>
            <TableRow>
              <TableCell>Eclair</TableCell>
              <TableCell className="text-right">262</TableCell>
              <TableCell className="text-right">16.0</TableCell>
              <TableCell className="text-right">24</TableCell>
              <TableCell className="text-right">6.0</TableCell>
            </TableRow>
            <TableRow>
              <TableCell>Cupcake</TableCell>
              <TableCell className="text-right">305</TableCell>
              <TableCell className="text-right">3.7</TableCell>
              <TableCell className="text-right">67</TableCell>
              <TableCell className="text-right">4.3</TableCell>
            </TableRow>
          </TableBody>
        </Table>
      </Block>
      <BlockTitle>Within card</BlockTitle>
      <Card className="overflow-x-auto" contentWrap={false}>
        <Table>
          <TableHead>
            <TableRow header>
              <TableCell header>Dessert (100g serving)</TableCell>
              <TableCell header className="text-right">
                Calories
              </TableCell>
              <TableCell header className="text-right">
                Fat (g)
              </TableCell>
              <TableCell header className="text-right">
                Carbs
              </TableCell>
              <TableCell header className="text-right">
                Protein (g)
              </TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            <TableRow>
              <TableCell>Frozen yogurt</TableCell>
              <TableCell className="text-right">159</TableCell>
              <TableCell className="text-right">6.0</TableCell>
              <TableCell className="text-right">24</TableCell>
              <TableCell className="text-right">4.0</TableCell>
            </TableRow>
            <TableRow>
              <TableCell>Ice cream sandwich</TableCell>
              <TableCell className="text-right">237</TableCell>
              <TableCell className="text-right">9.0</TableCell>
              <TableCell className="text-right">37</TableCell>
              <TableCell className="text-right">4.4</TableCell>
            </TableRow>
            <TableRow>
              <TableCell>Eclair</TableCell>
              <TableCell className="text-right">262</TableCell>
              <TableCell className="text-right">16.0</TableCell>
              <TableCell className="text-right">24</TableCell>
              <TableCell className="text-right">6.0</TableCell>
            </TableRow>
            <TableRow>
              <TableCell>Cupcake</TableCell>
              <TableCell className="text-right">305</TableCell>
              <TableCell className="text-right">3.7</TableCell>
              <TableCell className="text-right">67</TableCell>
              <TableCell className="text-right">4.3</TableCell>
            </TableRow>
          </TableBody>
        </Table>
      </Card>
    </Page>
  );
}

```

--------------------------------

### Mail App List Example

Source: https://konstaui.com/react/list

Demonstrates a list simulating a mail app interface, showing sender, time, and message snippets. Useful for displaying notification-like items.

```jsx
      <BlockTitle>Mail App</BlockTitle>
      <List strongIos outlineIos>
        <ListItem
          link
          chevronMaterial={false}
          title="Facebook"
          after="17:14"
          subtitle="New messages from John Doe"
          text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
        />
        <ListItem
          link
          chevronMaterial={false}
          title="John Doe (via Twitter)"
          after="17:11"
          subtitle="John Doe (@_johndoe) mentioned you on Twitter!"
          text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
        />
        <ListItem
          link
          chevronMaterial={false}
          title="Facebook"
          after="16:48"
          subtitle="New messages from John Doe"
          text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
        />
        <ListItem
          link
          chevronMaterial={false}
          title="John Doe (via Twitter)"
          after="15:32"
          subtitle="John Doe (@_johndoe) mentioned you on Twitter!"
          text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
        />
      </List>
```

--------------------------------

### Konsta UI Notification Component Examples

Source: https://konstaui.com/react/notification

This example shows how to implement different types of notifications using the Konsta UI Notification component. It includes full layout, close button, click-to-close, and callback functionalities. Ensure you have the necessary Konsta UI components imported.

```jsx
import React, { useState, useEffect } from 'react';
import {
  Page,
  Navbar,
  NavbarBackLink,
  Block,
  Notification,
  Button,
  Dialog,
  DialogButton,
} from 'konsta/react';
import DemoIcon from '../components/DemoIcon';


export default function NotificationPage() {
  const [notificationFull, setNotificationFull] = useState(false);
  const [notificationWithButton, setNotificationWithButton] = useState(false);
  const [notificationCloseOnClick, setNotificationCloseOnClick] =
    useState(false);
  const [notificationCallbackOnClose, setNotificationCallbackOnClose] = 
    useState(false);
  const [alertOpened, setAlertOpened] = useState(false);


  const openNotification = (setter) => {
    setNotificationFull(false);
    setNotificationWithButton(false);
    setNotificationCloseOnClick(false);
    setNotificationCallbackOnClose(false);
    setter(true);
  };


  useEffect(() => {
    let timer;
    if (notificationFull) {
      timer = setTimeout(() => {
        setNotificationFull(false);
      }, 3000);
    }
    return () => clearTimeout(timer);
  }, [notificationFull]);


  return (
    <Page>
      <Navbar
        title="Notification"
        />
      <Notification
        opened={notificationFull}
        icon={<DemoIcon />}
        title="Konsta UI"
        titleRightText="now"
        subtitle="This is a subtitle"
        text="This is a simple notification message"
      />
      <Notification
        opened={notificationWithButton}
        icon={<DemoIcon />}
        title="Konsta UI"
        button
        onClick={() => setNotificationWithButton(false)}
        subtitle="Notification with close button"
        text="Click (x) button to close me"
      />
      <Notification
        opened={notificationCloseOnClick}
        icon={<DemoIcon />}
        title="Konsta UI"
        titleRightText="now"
        subtitle="Notification with close on click"
        text="Click me to close"
        onClick={() => setNotificationCloseOnClick(false)}
      />
      <Notification
        opened={notificationCallbackOnClose}
        icon={<DemoIcon />}
        title="Konsta UI"
        titleRightText="now"
        subtitle="Notification with close on click"
        text="Click me to close"
        onClick={() => {
          setNotificationCallbackOnClose(false);
          setAlertOpened(true);
        }}
      />
      <Dialog
        opened={alertOpened}
        onBackdropClick={() => setAlertOpened(false)}
        title="Konsta UI"
        content="Notification closed"
        buttons={
          <DialogButton onClick={() => setAlertOpened(false)}>Ok</DialogButton>
        }
      />
      <Block inset strong className="space-y-4">
        <p>
          Konsta UI comes with simple Notifications component that allows you to
          show some useful messages to user and request basic actions.
        </p>
        <div className="grid gap-4 sm:grid-cols-2">
          <Button rounded onClick={() => openNotification(setNotificationFull)}>
            Full layout notification
          </Button>
          <Button
            rounded
            onClick={() => openNotification(setNotificationWithButton)}
          >
            With Close Button
          </Button>
          <Button
            rounded
            onClick={() => openNotification(setNotificationCloseOnClick)}
          >
            Click to Close
          </Button>
          <Button
            rounded
            onClick={() => openNotification(setNotificationCallbackOnClose)}
          >
            Callback on Close
          </Button>
        </div>
      </Block>
    </Page>
  );
}
```

--------------------------------

### React Messages Component Example

Source: https://konstaui.com/react/messages

This example shows how to implement a chat interface using Konsta UI's Messages, Messagebar, and Message components in React. It includes state management for messages and input, handling message sending, and scrolling to the bottom of the messages list. Ensure all necessary Konsta UI and framework7-icons components are imported.

```jsx
/* eslint-disable react/no-array-index-key */
import { React, useState, useRef, useEffect } from 'react';
import {
  Page,
  Navbar,
  NavbarBackLink,
  Messagebar,
  Messages,
  Message,
  MessagesTitle,
  Link,
  Icon,
  ToolbarPane,
} from 'konsta/react';
import { CameraFill, ArrowUpCircleFill } from 'framework7-icons/react';
import { MdCameraAlt, MdSend } from 'react-icons/md';


export default function MessagesPage() {
  const [messageText, setMessageText] = useState('');
  const [messagesData, setMessagesData] = useState([
    {
      type: 'sent',
      text: 'Hi, Kate',
    },
    {
      type: 'sent',
      text: 'How are you?',
    },
    {
      name: 'Kate',
      type: 'received',
      text: 'Hi, I am good!',
      avatar: 'https://cdn.framework7.io/placeholder/people-100x100-9.jpg',
    },
    {
      name: 'Blue Ninja',
      type: 'received',
      text: 'Hi there, I am also fine, thanks! And how are you?',
      avatar: 'https://cdn.framework7.io/placeholder/people-100x100-7.jpg',
    },
    {
      type: 'sent',
      text: 'Hey, Blue Ninja! Glad to see you ;)',
    },
    {
      type: 'sent',
      text: 'How do you feel about going to the movies today?',
    },
    {
      name: 'Kate',
      type: 'received',
      text: ' Oh, great idea!',
      avatar: 'https://cdn.framework7.io/placeholder/people-100x100-9.jpg',
    },
    {
      name: 'Kate',
      type: 'received',
      text: ' What cinema are we going to?',
      avatar: 'https://cdn.framework7.io/placeholder/people-100x100-9.jpg',
    },
    {
      name: 'Blue Ninja',
      type: 'received',
      text: 'Great. And what movie?',
      avatar: 'https://cdn.framework7.io/placeholder/people-100x100-7.jpg',
    },
    {
      name: 'Blue Ninja',
      type: 'received',
      text: 'What time?',
      avatar: 'https://cdn.framework7.io/placeholder/people-100x100-7.jpg',
    },
  ]);


  const pageRef = useRef();
  const initiallyScrolled = useRef(false);


  const scrollToBottom = () => {
    const pageElement = pageRef.current || pageRef.current.el;
    pageElement.scrollTo({
      top: pageElement.scrollHeight - pageElement.offsetHeight,
      behavior: initiallyScrolled.current ? 'smooth' : 'auto',
    });
  };


  useEffect(() => {
    scrollToBottom();
    initiallyScrolled.current = true;
  }, [messagesData]);


  const handleSendClick = () => {
    const text = messageText.replace(/\n/g, '<br>').trim();
    const type = 'sent';
    const messagesToSend = [];
    if (text.length) {
      messagesToSend.push({
        text,
        type,
      });
    }
    if (messagesToSend.length === 0) {
      return;
    }
    setMessagesData([...messagesData, ...messagesToSend]);
    setMessageText('');
  };


  const inputOpacity = messageText ? 1 : 0.3;
  const isClickable = messageText.trim().length > 0;


  const currentDate = new Intl.DateTimeFormat('en-US', {
    weekday: 'long',
    month: 'short',
    day: 'numeric',
    hour12: false,
    hour: '2-digit',
    minute: '2-digit',
  })
    .formatToParts(new Date())
    .map((part) => {
      if (['weekday', 'month', 'day'].includes(part.type)) {
        return <b key={part.type}>{part.value}</b>;
      }
      return part.value;
    });

  return (
    <Page ref={pageRef} className="messages-page-ios messages-page-light">
      <Navbar title="Chat with Kate">
        <NavbarBackLink />
      </Navbar>
      <Messages>
        <MessagesTitle>{currentDate}</MessagesTitle>
        {messagesData.map((message, index) => (
          <Message
            key={index}
            type={message.type}
            image={message.avatar}
            name={message.name}
            text={message.text}
            first={index === messagesData.length - 1}
            last={index === messagesData.length - 1}
          />
        ))}
      </Messages>
      <Messagebar placeholder="Message" onChange={(e) => setMessageText(e.target.value)} value={messageText}>
        <Link iconOnly onClick={() => {}}>
          <Icon ios={<i><CameraFill /></i>} aurora={<i><CameraFill /></i>} md={<i><MdCameraAlt /></i>} />
        </Link>
        <Link iconOnly onClick={() => {}}>
          <Icon ios={<i><ArrowUpCircleFill /></i>} aurora={<i><ArrowUpCircleFill /></i>} md={<i><MdSend /></i>} />
        </Link>
      </Messagebar>
    </Page>
  );
}

```

--------------------------------

### Konsta UI Breadcrumbs Basic Example

Source: https://konstaui.com/react/breadcrumbs

Demonstrates the basic structure of Konsta UI Breadcrumbs with Home, Catalog, and active iPhone 12 items.

```jsx
import React, {
  useRef,
  useState,
} from 'react';
import {
  Page,
  Navbar,
  NavbarBackLink,
  BlockTitle,
  BlockHeader,
  Block,
  Breadcrumbs,
  BreadcrumbsItem,
  BreadcrumbsSeparator,
  BreadcrumbsCollapsed,
  Popover,
  List,
  ListItem,
  Link,
} from 'konsta/react';


export default function BreadcrumbsPage() {
  const isPreview = document.location.href.includes('examplePreview');


  const popoverTargetRef = useRef(null);
  const [popoverOpened, setPopoverOpened] = useState(false);
  return (
    <Page>
      <Navbar
        title="Breadcrumbs"
        />


      <Block strong inset>
        Breadcrumbs allow users to keep track and maintain awareness of their
        locations within the app or website. They should be used for large sites
        and apps with hierarchically arranged pages.
      </Block>


      <BlockTitle>Basic</BlockTitle>
      <Block strongIos outlineIos>
        <Breadcrumbs>
          <BreadcrumbsItem>
            <Link>Home</Link>
          </BreadcrumbsItem>
          <BreadcrumbsSeparator />
          <BreadcrumbsItem>
            <Link>Catalog</Link>
          </BreadcrumbsItem>
          <BreadcrumbsItem active>
            <Link>iPhone 12</Link>
          </BreadcrumbsItem>
        </Breadcrumbs>
      </Block>


      <BlockTitle>Scrollable</BlockTitle>
      <BlockHeader>
        Breadcrumbs will be scrollable if they don't fit the screen
      </BlockHeader>
      <Block strongIos outlineIos>
        <Breadcrumbs>
          <BreadcrumbsItem>
            <Link>Home</Link>
          </BreadcrumbsItem>
          <BreadcrumbsSeparator />
          <BreadcrumbsItem>
            <Link>Catalog</Link>
          </BreadcrumbsItem>
          <BreadcrumbsSeparator />
          <BreadcrumbsItem>
            <Link>Phones</Link>
          </BreadcrumbsItem>
          <BreadcrumbsSeparator />
          <BreadcrumbsItem>
            <Link>Apple</Link>
          </BreadcrumbsItem>
          <BreadcrumbsSeparator />
          <BreadcrumbsItem active>iPhone 12</BreadcrumbsItem>
        </Breadcrumbs>
      </Block>


      <BlockTitle>Collapsed</BlockTitle>
      <Block strongIos outlineIos>
        <Breadcrumbs>
          <BreadcrumbsItem>
            <Link>Home</Link>
          </BreadcrumbsItem>
          <BreadcrumbsSeparator />
          <BreadcrumbsCollapsed
            ref={popoverTargetRef}
            onClick={() => setPopoverOpened(true)}
          />
          <BreadcrumbsSeparator />
          <BreadcrumbsItem active>iPhone 12</BreadcrumbsItem>
        </Breadcrumbs>
      </Block>


      <Popover
        opened={popoverOpened}
        className="breadcrumbs-popover"
        style={{ width: '120px' }}
        target={popoverTargetRef.current}
        onBackdropClick={() => setPopoverOpened(false)}
      >
        <List nested>
          <ListItem
            link
            title="Catalog"
            onClick={() => setPopoverOpened(false)}
          />
          <ListItem
            link
            title="Phones"
            onClick={() => setPopoverOpened(false)}
          />
          <ListItem
            link
            title="Apple"
            onClick={() => setPopoverOpened(false)}
          />
        </List>
      </Popover>
    </Page>
  );
}
```

--------------------------------

### Basic Menu List Example - Konsta UI React

Source: https://konstaui.com/react/menu-list

Demonstrates a basic Menu List with items that highlight when selected. Use this for navigation where active states need to be visually indicated.

```jsx
import React, { useState } from 'react';
import {
  Page,
  Navbar,
  NavbarBackLink,
  Block,
  MenuList,
  MenuListItem,
} from 'konsta/react';
import DemoIcon from '../components/DemoIcon';


export default function MenuListPage() {
  const [selected, setSelected] = useState('home');
  const [selectedMedia, setSelectedMedia] = useState('home');


  return (
    <Page>
      <Navbar
        title="Menu List"
        />


      <Block strong inset>
        <p>
          Menu list unlike usual links list is designed to indicate currently
          active screen (or section) of your app. Think about it like a Tabbar
          but in a form of a list.
        </p>
      </Block>
      <MenuList strongIos outlineIos>
        <MenuListItem
          title="Home"
          active={selected === 'home'}
          onClick={() => setSelected('home')}
          media={<DemoIcon />}
        />
        <MenuListItem
          title="Profile"
          active={selected === 'profile'}
          onClick={() => setSelected('profile')}
          media={<DemoIcon />}
        />
        <MenuListItem
          title="Settings"
          active={selected === 'settings'}
          onClick={() => setSelected('settings')}
          media={<DemoIcon />}
        />
      </MenuList>

      <MenuList strongIos outlineIos>
        <MenuListItem
          title="Home"
          subtitle="Home subtitle"
          active={selectedMedia === 'home'}
          onClick={() => setSelectedMedia('home')}
          media={<DemoIcon />}
        />
        <MenuListItem
          title="Profile"
          subtitle="Profile subtitle"
          active={selectedMedia === 'profile'}
          onClick={() => setSelectedMedia('profile')}
          media={<DemoIcon />}
        />
        <MenuListItem
          title="Settings"
          subtitle="Settings subtitle"
          active={selectedMedia === 'settings'}
          onClick={() => setSelectedMedia('settings')}
          media={<DemoIcon />}
        />
      </MenuList>
    </Page>
  );
}
```

--------------------------------

### Simple Card Example in React

Source: https://konstaui.com/react/card

A basic card component with plain text content. Use for simple content display.

```jsx
import React from 'react';
import {
  Page,
  Navbar,
  NavbarBackLink,
  Card,
  BlockTitle,
  List,
  ListItem,
  Link,
  Button,
} from 'konsta/react';


export default function CardsPage() {
  return (
    <Page>
      <Navbar
        title="Cards"
        />


      <BlockTitle>Simple Cards</BlockTitle>
      <Card>
        This is a simple card with plain text, but cards can also contain their
        own header, footer, list view, image, or any other element.
      </Card>
      <Card header="Card header" footer="Card footer">
        Card with header and footer. Card headers are used to display card
        titles and footers for additional information or just for custom
        actions.
      </Card>
      <Card>
        Another card. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Suspendisse feugiat sem est, non tincidunt ligula volutpat sit amet.
        Mauris aliquet magna justo.
      </Card>


      <BlockTitle>Outline Cards</BlockTitle>
      <Card outline>
        This is a simple card with plain text, but cards can also contain their
        own header, footer, list view, image, or any other element.
      </Card>
      <Card outline header="Card header" footer="Card footer">
        Card with header and footer. Card headers are used to display card
        titles and footers for additional information or just for custom
        actions.
      </Card>
      <Card outline>
        Another card. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Suspendisse feugiat sem est, non tincidunt ligula volutpat sit amet.
        Mauris aliquet magna justo.{' '}
      </Card>


      <BlockTitle>Outline With Dividers</BlockTitle>
      <Card
        outline
        header="Card header"
        footer="Card footer"
        headerDivider
        footerDivider
      >
        Card with header and footer. Card headers are used to display card
        titles and footers for additional information or just for custom
        actions.
      </Card>


      <BlockTitle>Raised Cards</BlockTitle>
      <Card raised>
        This is a simple card with plain text, but cards can also contain their
        own header, footer, list view, image, or any other element.
      </Card>
      <Card raised header="Card header" footer="Card footer">
        Card with header and footer. Card headers are used to display card
        titles and footers for additional information or just for custom
        actions.
      </Card>
      <Card raised>
        Another card. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Suspendisse feugiat sem est, non tincidunt ligula volutpat sit amet.
        Mauris aliquet magna justo.{' '}
      </Card>


      <BlockTitle>Card With List View</BlockTitle>
      <Card>
        <List nested className="-m-4">
          <ListItem href title="Link 1" />
          <ListItem href title="Link 2" />
          <ListItem href title="Link 3" />
          <ListItem href title="Link 4" />
          <ListItem href title="Link 5" />
        </List>
      </Card>

    </Page>
  );
}
```

--------------------------------

### Basic Navbar Example

Source: https://konstaui.com/react/navbar

A standard Navbar with a title, subtitle, and a right-aligned link. It also demonstrates sticky positioning and different size variants (medium, large) and transparency.

```jsx
import React, { useState } from 'react';
import {
  Page,
  Navbar,
  NavbarBackLink,
  Link,
  Block,
  BlockTitle,
  BlockHeader,
  List,
  ListItem,
  Radio,
  Toggle,
} from 'konsta/react';


export default function NavbarPage() {
  const [size, setSize] = useState('Default');
  const [isTransparent, setIsTransparent] = useState(false);
  return (
    <Page>
      <Navbar
        title="Navbar"
        subtitle="Subtitle"
        className="top-0 sticky"
        medium={size === 'Medium'}
        large={size === 'Large'}
        transparent={isTransparent}
        right={<Link navbar>Right</Link>}
      />
      <div className="relative">
        <Block strong inset>
          <p>
            Navbar is a fixed area at the top of a screen that contains Page
            title and navigation elements.
          </p>
        </Block>


        <BlockTitle>Size</BlockTitle>
        <BlockHeader>
          Medium and Large will collapse to usual size on page scroll
        </BlockHeader>
        <List strong inset>
          {['Default', 'Medium', 'Large'].map((v) => (
            <ListItem
              key={v}
              label
              title={v}
              after={
                <Radio
                  component="div"
                  value={v}
                  checked={size === v}
                  onChange={() => setSize(v)}
                />
              }
            />
          ))}
        </List>


        <BlockTitle>Transparent</BlockTitle>


        <BlockHeader>
          When navbar is transparent, its title and background will become
          visible on page scroll
        </BlockHeader>
        <List strong inset>
          <ListItem
            label
            title="Transparent"
            after={
              <Toggle
                component="div"
                checked={isTransparent === true}
                onChange={() => setIsTransparent(!isTransparent)}
              />
            }
          />
        </List>
      </div>
    </Page>
  );
}
```

--------------------------------

### Example Next.js Page with Konsta UI Components

Source: https://konstaui.com/react/next-js

Demonstrates using various Konsta UI React components like Page, Navbar, Block, Button, List, and ListItem within a Next.js page.

```javascript
// Konsta UI components
import {
  Page,
  Navbar,
  Block,
  Button,
  List,
  ListItem,
  Link,
  BlockTitle,
} from 'konsta/react';

export default function Home() {
  return (
    <Page>
      <Navbar title="My App" />

      <Block strong>
        <p>
          Here is your Next.js & Konsta UI app. Let's see what we have here.
        </p>
      </Block>
      <BlockTitle>Navigation</BlockTitle>
      <List>
        <ListItem href="/about/" title="About" />
        <ListItem href="/form/" title="Form" />
      </List>

      <Block strong className="flex space-x-4">
        <Button>Button 1</Button>
        <Button>Button 2</Button>
      </Block>
    </Page>
  );
}
```

--------------------------------

### FAB Component Examples

Source: https://konstaui.com/react/fab

Demonstrates the usage of the FAB component in various positions (top-right, bottom-right, bottom-left, top-left, center-center, center-bottom) with different styling and text options. Includes conditional icon rendering based on theme.

```jsx
import React from 'react';
import {
  Page,
  Navbar,
  NavbarBackLink,
  Block,
  Fab,
  useTheme,
} from 'konsta/react';
import { Plus } from 'framework7-icons/react';
import { MdAdd } from 'react-icons/md';


export default function FabPage() {
  const theme = useTheme();
  const PlusIcon =
    theme === 'ios' ? (
      <Plus className="w-6 h-6" />
    ) : (
      <MdAdd className="w-6 h-6" />
    );


  return (
    <Page>
      <Navbar
        title="FAB"
        />


      {/* Right Top */}
      <Fab
        className="fixed right-safe-4 ios:top-safe-19 material:top-safe-18 z-20 k-color-brand-red"
        icon={PlusIcon}
      />


      {/* Right Bottom */}
      <Fab className="fixed right-safe-4 bottom-safe-4 z-20" icon={PlusIcon} />


      {/* Left Bottom */}
      <Fab
        className="fixed left-safe-4 bottom-safe-4 z-20 k-color-brand-green"
        icon={PlusIcon}
      />


      {/* Left Top */}
      <Fab
        className="fixed left-safe-4 ios:top-safe-19 material:top-safe-18 z-20 k-color-brand-yellow"
        icon={PlusIcon}
      />


      {/* Center Center */}
      <Fab
        className="fixed left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 z-20"
        icon={PlusIcon}
      />


      {/* Center Bottom */}
      <Fab
        className="fixed left-1/2 bottom-safe-4 transform -translate-x-1/2 z-20"
        icon={PlusIcon}
        text="Create"
        textPosition="after"
      />
    </Page>
  );
}
```

--------------------------------

### Styled Card Example

Source: https://konstaui.com/react/card

Demonstrates a styled card with a background image, title, date, and description. Includes conditional rendering for different platforms (material/ios) and navigation links.

```jsx
<Card
  outline
  footer={
    <>
      <div className="flex justify-between material:hidden">
        <Link>Like</Link>
        <Link>Read more</Link>
      </div>
      <div className="flex justify-start ios:hidden space-x-2 rtl:space-x-reverse">
        <Button rounded inline>
          Like
        </Button>
        <Button rounded inline outline>
          Read more
        </Button>
      </div>
    </>
  }
>
  <div
    className="ios:-mx-4 ios:-mt-4 h-48 p-4 flex items-end text-white ios:font-bold bg-cover bg-center material:rounded-xl mb-4 material:text-[22px]"
    style={{
      backgroundImage:
        'url(https://cdn.framework7.io/placeholder/nature-1000x600-3.jpg)',
    }}
  >
    Journey To Mountains
  </div>
  <div className="text-gray-500 mb-3">Posted on January 21, 2021</div>
  <p>
    Quisque eget vestibulum nulla. Quisque quis dui quis ex ultricies
    efficitur vitae non felis. Phasellus quis nibh hendrerit...
  </p>
</Card>
```
Tokens:
Raw