### Minimal Konsta App Setup

Source: https://github.com/konstaui/konsta/blob/master/_autodocs/00-component-inventory.md

This example demonstrates the basic structure for a Konsta application, including the necessary provider and root components. It shows how to render a page with a navbar, a list, and a button.

```javascript
import { App, KonstaProvider, Page, Navbar, Button, List, ListItem } from 'konsta/react';

export default function MyApp() {
  return (
    <KonstaProvider theme="material">
      <App>
        <Page>
          <Navbar title="My App" />
          <List>
            <ListItem title="Item 1" />
          </List>
          <Button>Click Me</Button>
        </Page>
      </App>
    </KonstaProvider>
  );
}
```

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

### Full Screen App Component Setup

Source: https://github.com/konstaui/konsta/blob/master/_autodocs/03-app-container.md

Example of configuring the App component for a full-screen application with dark mode and safe area handling enabled.

```javascript
<App theme="material" dark={true} safeAreas={true}>
  {/* App content */}
</App>
```

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

### Install Dependencies with npm

Source: https://github.com/konstaui/konsta/blob/master/README.md

Run this command to install all project dependencies before development.

```bash
$ npm install
```

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

### Konsta UI Block Component Usage Example

Source: https://github.com/konstaui/konsta/blob/master/_autodocs/03-app-container.md

Demonstrates how to use the Block component with its header, title, and footer. This example shows common props like 'inset' and 'strong' for styling.

```javascript
<Block inset={true} strong={true}>
  <BlockHeader>
    <BlockTitle>Section Title</BlockTitle>
  </BlockHeader>
  <div>Block content here</div>
  <BlockFooter>
    <small>Additional info</small>
  </BlockFooter>
</Block>
```

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

### Basic List Example

Source: https://github.com/konstaui/konsta/blob/master/_autodocs/06-lists.md

A simple list with three items.

```javascript
<List>
  <ListItem title="Item 1" />
  <ListItem title="Item 2" />
  <ListItem title="Item 3" />
</List>
```

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

### Searchbar Usage Example

Source: https://github.com/konstaui/konsta/blob/master/_autodocs/07-form-inputs.md

Demonstrates how to use the Searchbar component with state management for input value and clear functionality.

```javascript
const [search, setSearch] = useState('');

<Searchbar 
  value={search}
  onChange={(e) => setSearch(e.target.value)}
  onClear={() => setSearch('')}
  placeholder="Search..."
/>
```

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

### Link Button Examples

Source: https://github.com/konstaui/konsta/blob/master/_autodocs/04-buttons-links.md

Shows how to use the Button component as a link by providing an `href` prop, with an outline variant.

```javascript
<Button href="/page">Link Button</Button>
```

```javascript
<Button href="/page" outline>Outline Link Button</Button>
```

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

### Segmented Control Button Examples

Source: https://github.com/konstaui/konsta/blob/master/_autodocs/04-buttons-links.md

Provides an example of creating a segmented control using multiple Button components with specific props for active and strong states.

```javascript
<div className="flex">
  <Button segmented segmentedStrong segmentedActive>
    Active
  </Button>
  <Button segmented>
    Inactive
  </Button>
</div>
```

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

### Inset List Example

Source: https://github.com/konstaui/konsta/blob/master/_autodocs/06-lists.md

An inset list with margins on the sides. Use the 'inset' prop to apply this style.

```javascript
<List inset={true}>
  <ListItem title="Item 1" />
  <ListItem title="Item 2" />
</List>
```

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

### Strong List Example

Source: https://github.com/konstaui/konsta/blob/master/_autodocs/06-lists.md

A list with a strong background highlighting. Apply the 'strong' prop for this effect.

```javascript
<List strong={true}>
  <ListItem title="Item 1" />
  <ListItem title="Item 2" />
</List>
```

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

### Basic Fill Button Examples

Source: https://github.com/konstaui/konsta/blob/master/_autodocs/04-buttons-links.md

Demonstrates the default, large, small, rounded, raised, and disabled states of the fill button.

```javascript
<Button>Default Button</Button>
```

```javascript
<Button large>Large Button</Button>
```

```javascript
<Button small>Small Button</Button>
```

```javascript
<Button rounded>Rounded Button</Button>
```

```javascript
<Button raised>Raised Button</Button>
```

```javascript
<Button disabled>Disabled Button</Button>
```

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

### ListButton Usage Example

Source: https://github.com/konstaui/konsta/blob/master/_autodocs/06-lists.md

Demonstrates how to use the ListButton component within a List. Supports titles, subtitles, and click handlers.

```javascript
<List>
  <ListButton 
    title="Option 1"
    onClick={() => handleOption(1)}
  />
  <ListButton 
    title="Option 2"
    subtitle="Description"
    chevron={true}
    onClick={() => handleOption(2)}
  />
</List>
```

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

### Auto Theme Detection Example

Source: https://github.com/konstaui/konsta/blob/master/_autodocs/12-utilities-helpers.md

Demonstrates how to use the auto theme detection by setting a class on the HTML element. This is typically handled automatically by the provider.

```html
<html class="ios">
  {/* Content automatically uses iOS theme */}
</html>
```

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

### Basic FAB Usage

Source: https://github.com/konstaui/konsta/blob/master/_autodocs/04-buttons-links.md

A basic example of a Floating Action Button positioned at the bottom-right. It includes an 'add' icon.

```javascript
<Fab position="right-bottom">
  <Icon>add</Icon>
</Fab>
```

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

### Basic Popup Usage Example

Source: https://github.com/konstaui/konsta/blob/master/_autodocs/08-dialogs-overlays.md

Demonstrates how to use the Popup component with state management for opening and closing. It includes a close button and handles backdrop clicks to close the popup.

```javascript
const [popupOpened, setPopupOpened] = useState(false);

<Popup
  opened={popupOpened}
  onClose={() => setPopupOpened(false)}
  onBackdropClick={() => setPopupOpened(false)}
  closeButton={true}
>
  <Page>
    <Navbar title="Popup" left={<NavbarBackLink onClick={() => setPopupOpened(false)} />} />
    <div>Popup content here</div>
  </Page>
</Popup>
```

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

### Usage Example for Sheet

Source: https://github.com/konstaui/konsta/blob/master/_autodocs/08-dialogs-overlays.md

Shows how to implement a basic Sheet component that slides up from the bottom. Manage the opened state and close handlers for backdrop clicks and explicit closing.

```javascript
const [sheetOpened, setSheetOpened] = useState(false);

<Sheet
  opened={sheetOpened}
  onClose={() => setSheetOpened(false)}
  onBackdropClick={() => setSheetOpened(false)}
>
  <div>Sheet content here</div>
</Sheet>
```

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

### Tonal Button Examples

Source: https://github.com/konstaui/konsta/blob/master/_autodocs/04-buttons-links.md

Demonstrates the tonal button style, featuring a semi-transparent background, with a rounded variant.

```javascript
<Button tonal>Tonal Button</Button>
```

```javascript
<Button tonal rounded>Tonal Rounded</Button>
```

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

### Usage Example for Popover

Source: https://github.com/konstaui/konsta/blob/master/_autodocs/08-dialogs-overlays.md

Demonstrates how to open and close a Popover component anchored to a button. Ensure the target ref is correctly set and the opened state is managed.

```javascript
const [popoverOpened, setPopoverOpened] = useState(false);
const popoverTarget = useRef(null);

<>
  <Button 
    ref={popoverTarget}
    onClick={() => setPopoverOpened(!popoverOpened)}
  >
    Open Menu
  </Button>
  
  <Popover
    opened={popoverOpened}
    target={popoverTarget.current}
    onBackdropClick={() => setPopoverOpened(false)}
  >
    <List>
      <ListButton title="Option 1" />
      <ListButton title="Option 2" />
    </List>
  </Popover>
</>
```

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

### Outline Button Examples

Source: https://github.com/konstaui/konsta/blob/master/_autodocs/04-buttons-links.md

Showcases outline buttons with options for rounded corners and platform-specific outline styles.

```javascript
<Button outline>Outline Button</Button>
```

```javascript
<Button outline rounded>Outline Rounded</Button>
```

```javascript
<Button outlineIos>iOS Outline Only</Button>
```

```javascript
<Button outlineMaterial>Material Outline Only</Button>
```

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

### ListInput Usage Example

Source: https://github.com/konstaui/konsta/blob/master/_autodocs/06-lists.md

Shows how to integrate the ListInput component for email input. It manages state with useState and handles changes via onChange.

```javascript
const [email, setEmail] = useState('');

<List>
  <ListInput
    label="Email"
    type="email"
    placeholder="Enter email"
    value={email}
    onChange={(e) => setEmail(e.target.value)}
  />
</List>
```

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

### Basic Breadcrumbs Usage

Source: https://github.com/konstaui/konsta/blob/master/_autodocs/05-navigation.md

Example of a basic breadcrumb navigation structure with items and separators.

```javascript
<Breadcrumbs>
  <BreadcrumbsItem href="/">Home</BreadcrumbsItem>
  <BreadcrumbsSeparator />
  <BreadcrumbsItem href="/products">Products</BreadcrumbsItem>
  <BreadcrumbsSeparator />
  <BreadcrumbsItem active>Current Page</BreadcrumbsItem>
</Breadcrumbs>
```

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

### Card Component Usage Example

Source: https://github.com/konstaui/konsta/blob/master/_autodocs/03-app-container.md

Demonstrates how to use the Card component with header content and footer text. The content within the Card tags will be displayed as the main body of the card.

```javascript
<Card 
  headerContent="Card Title"
  footer="Footer text"
>
  Card content here
</Card>
```

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

### Simple Dialog Usage

Source: https://github.com/konstaui/konsta/blob/master/_autodocs/08-dialogs-overlays.md

Example of a simple dialog with a title, content, and a single OK button. Used for displaying success messages or confirmations.

```javascript
<Dialog
  title="Success"
  content="Operation completed successfully"
  opened={isSuccess}
  buttons={
    <DialogButton strong onClick={() => setIsSuccess(false)}>
      OK
    </DialogButton>
  }
/>
```

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

### Toggle Checkbox Example

Source: https://github.com/konstaui/konsta/blob/master/_autodocs/07-form-inputs.md

Illustrates using the Checkbox component as a toggle switch, controlled by a boolean state.

```javascript
<Checkbox 
  type="toggle"
  checked={isDarkMode}
  onChange={() => setIsDarkMode(!isDarkMode)}
/>
```

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

### Toolbar Component Usage

Source: https://github.com/konstaui/konsta/blob/master/_autodocs/05-navigation.md

Example of using the Toolbar and ToolbarPane components to create a toolbar with left and right aligned buttons.

```javascript
<Toolbar>
  <ToolbarPane left>
    <Button clear small>Cancel</Button>
  </ToolbarPane>
  <ToolbarPane right>
    <Button clear small>Save</Button>
  </ToolbarPane>
</Toolbar>
```

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

### KonstaProvider Usage Example - React

Source: https://github.com/konstaui/konsta/blob/master/_autodocs/02-provider-hooks.md

Demonstrates how to wrap a Konsta UI application with KonstaProvider in React to configure the iOS theme and enable dark mode.

```javascript
import React from 'react';
import { KonstaProvider, App, Page, Button } from 'konsta/react';

function MyApp() {
  return (
    <KonstaProvider theme="ios" dark={true}>
      <App>
        <Page>
          <Button>Click me</Button>
        </Page>
      </App>
    </KonstaProvider>
  );
}

export default MyApp;
```

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

### Clear Button Examples

Source: https://github.com/konstaui/konsta/blob/master/_autodocs/04-buttons-links.md

Illustrates the clear button style, which has a transparent background, with a large size variant.

```javascript
<Button clear>Clear Button</Button>
```

```javascript
<Button clear large>Clear Large</Button>
```

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

### Basic Dialog Usage

Source: https://github.com/konstaui/konsta/blob/master/_autodocs/08-dialogs-overlays.md

Example of a basic dialog with title, content, and buttons. Manages dialog visibility using a state variable and includes a cancel and confirm button.

```javascript
const [dialogOpened, setDialogOpened] = useState(false);

<Dialog
  title="Confirm Action"
  content="Are you sure you want to proceed?"
  opened={dialogOpened}
  onBackdropClick={() => setDialogOpened(false)}
  buttons={
    <>
      <DialogButton onClick={() => setDialogOpened(false)}>
        Cancel
      </DialogButton>
      <DialogButton strong onClick={() => {
        // Handle action
        setDialogOpened(false);
      }}>
        Confirm
      </DialogButton>
    </>
  }
/>
```

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

### Basic Segmented Control Example

Source: https://github.com/konstaui/konsta/blob/master/_autodocs/07-form-inputs.md

A basic implementation of the Segmented control with two buttons. Use the 'selected' state to manage the active button.

```javascript
const [selected, setSelected] = useState('grid');

<Segmented>
  <SegmentedButton 
    value="list"
    active={selected === 'list'}
    onClick={() => setSelected('list')}
  >
    <Icon>list</Icon>
  </SegmentedButton>
  <SegmentedButton 
    value="grid"
    active={selected === 'grid'}
    onClick={() => setSelected('grid')}
  >
    <Icon>grid</Icon>
  </SegmentedButton>
</Segmented>
```

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

### Basic Actions Popup Example

Source: https://github.com/konstaui/konsta/blob/master/_autodocs/08-dialogs-overlays.md

Demonstrates how to use the Actions component to create a popup with multiple action buttons and groups. Control the popup's visibility using the 'opened' and 'onBackdropClick' props.

```javascript
const [actionsOpened, setActionsOpened] = useState(false);

<Actions
  opened={actionsOpened}
  onBackdropClick={() => setActionsOpened(false)}
>
  <ActionsGroup>
    <ActionsLabel>
      Actions
    </ActionsLabel>
    <ActionsButton onClick={() => {
      // Handle action 1
      setActionsOpened(false);
    }}>
      Action 1
    </ActionsButton>
    <ActionsButton onClick={() => {
      // Handle action 2
      setActionsOpened(false);
    }}>
      Action 2
    </ActionsButton>
  </ActionsGroup>
  
  <ActionsGroup>
    <ActionsButton 
      color="red"
      onClick={() => {
        // Handle delete
        setActionsOpened(false);
      }}
    >
      Delete
    </ActionsButton>
  </ActionsGroup>
</Actions>
```

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

### Tailwind Plugin Setup

Source: https://github.com/konstaui/konsta/blob/master/_autodocs/INDEX.md

Configure Tailwind CSS to use Konsta UI's color plugin. Ensure `konsta/plugin-colors` is imported and added to the plugins array in your `tailwind.config.js`.

```javascript
// tailwind.config.js
import konstaColors from 'konsta/plugin-colors';

export default {
  plugins: [konstaColors],
  theme: {
    colors: {
      'brand-primary': '#007AFF',
      'brand-secondary': '#FF2D55',
    }
  }
};
```

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

### Custom List Colors Example

Source: https://github.com/konstaui/konsta/blob/master/_autodocs/10-color-system.md

Shows how to customize the outline and background colors of a List component using the `colors` prop, specifically for iOS and Material Design variants.

```javascript
<List
  colors={{
    outlineIos: 'border-custom-border',
    strongBgMaterial: 'bg-custom-surface'
  }}
>
  <ListItem title="Item" />
</List>
```

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

### KonstaProvider Usage Example - Vue

Source: https://github.com/konstaui/konsta/blob/master/_autodocs/02-provider-hooks.md

Shows how to implement KonstaProvider in a Vue application to set the Material Design theme and activate dark mode.

```vue
<template>
  <KonstaProvider theme="material" :dark="true">
    <KApp>
      <KPage>
        <KButton>Click me</KButton>
      </KPage>
    </KApp>
  </KonstaProvider>
</template>

<script setup>
import { KonstaProvider, KApp, KPage, KButton } from 'konsta/vue';
</script>

```

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

### React App Component Usage

Source: https://github.com/konstaui/konsta/blob/master/_autodocs/03-app-container.md

Example of using the App component in a React application with a Page and a Button that opens a Dialog.

```javascript
import React, { useState } from 'react';
import { App, Page, Button, Dialog } from 'konsta/react';

function MyApp() {
  const [dialogOpened, setDialogOpened] = useState(false);

  return (
    <App theme="ios" dark={false} safeAreas={true}>
      <Page>
        <Button onClick={() => setDialogOpened(true)}>Open Dialog</Button>
        <Dialog
          title="Hello"
          content="This is a dialog"
          buttons={<Button>OK</Button>}
          opened={dialogOpened}
          onBackdropClick={() => setDialogOpened(false)}
        />
      </Page>
    </App>
  );
}

export default MyApp;
```

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

### Ref Forwarding Example

Source: https://github.com/konstaui/konsta/blob/master/_autodocs/11-types-and-interfaces.md

Demonstrates how to implement ref forwarding in a React component using TypeScript. This allows parent components to access the DOM element of the child component.

```typescript
interface Props {
  ref?: React.Ref<HTMLDivElement>;
}

const MyComponent = React.forwardRef((props, ref) => (
  <div ref={ref} {...props} />
));
```

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

### Custom Button Colors Example

Source: https://github.com/konstaui/konsta/blob/master/_autodocs/10-color-system.md

Demonstrates how to apply custom background and text colors to a Button component using the `colors` prop for both iOS and Material Design themes.

```javascript
<Button
  colors={{
    fillBgIos: 'bg-custom-primary',
    fillBgMaterial: 'bg-custom-material-primary',
    textIos: 'text-custom-text',
    textMaterial: 'text-custom-material-text'
  }}
>
  Custom Colored Button
</Button>
```

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

### Toast Component Usage

Source: https://github.com/konstaui/konsta/blob/master/_autodocs/08-dialogs-overlays.md

Example of how to use the Toast component to display a temporary message. It requires managing the 'opened' state and can be positioned at the top, bottom, or center.

```javascript
const [toastOpened, setToastOpened] = useState(false);

<Toast
  opened={toastOpened}
  position="bottom"
  icon={<Icon>check</Icon>}>
  Message copied!
</Toast>
```

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

### Svelte useTheme Hook Usage Example

Source: https://github.com/konstaui/konsta/blob/master/_autodocs/02-provider-hooks.md

Demonstrates how to use the `useTheme` hook in a Svelte component to conditionally render UI based on the current theme.

```svelte
<script>
import { useTheme } from 'konsta/svelte';

const theme = useTheme();
</script>

{#if $theme === 'ios'}
  <div>iOS Theme</div>
{:else}
  <div>Material Theme</div>
{/if}
```

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

### Messagebar Component Usage

Source: https://github.com/konstaui/konsta/blob/master/_autodocs/08-dialogs-overlays.md

Example of using the Messagebar component as a text input for composing messages. It includes state management for the input value and a send button.

```javascript
const [message, setMessage] = useState('');

<Messagebar
  placeholder="Type a message..."
  value={message}
  onChange={(e) => setMessage(e.target.value)}
  onSubmit={() => {
    // Send message
    setMessage('');
  }}
  sendButton={true}
/>
```

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

### Message Component Usage

Source: https://github.com/konstaui/konsta/blob/master/_autodocs/08-dialogs-overlays.md

Example of how to use the Messages, MessagesTitle, and Message components to create a chat display. Supports received and sent message types with avatars and text.

```javascript
<Messages>
  <MessagesTitle>Today</MessagesTitle>
  
  <Message
    type="received"
    name="User 1"
    avatar={<img src="avatar1.jpg" />}
    text="Hello!"
    first={true}
    last={true}
  />
  
  <Message
    type="sent"
    text="Hi there!"
    first={true}
    last={true}
  />
</Messages>
```

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

### Creating a Typed React Component with Konsta Props

Source: https://github.com/konstaui/konsta/blob/master/_autodocs/11-types-and-interfaces.md

Shows how to define a React component with specific TypeScript props, including nested objects for colors and optional callbacks. This example illustrates defining a custom component that accepts and utilizes Konsta-like prop structures.

```typescript
import React from 'react';

interface MyComponentProps {
  title: string;
  onClose?: () => void;
  colors?: {
    bgIos?: string;
    bgMaterial?: string;
  };
}

export const MyComponent = React.forwardRef<HTMLDivElement, MyComponentProps>(
  ({ title, onClose, colors }, ref) => {
    return (
      <div ref={ref} className={colors?.bgIos}>
        {title}
      </div>
    );
  }
);
```

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

### Configure Tailwind CSS with Konsta Colors Plugin

Source: https://github.com/konstaui/konsta/blob/master/_autodocs/10-color-system.md

Integrate the Konsta UI color system into your Tailwind CSS setup by importing the plugin and defining brand colors in your `tailwind.config.js` file. This enables dynamic color generation and CSS variable creation.

```javascript
import konstaColors from 'konsta/plugin-colors';

// tailwind.config.js
module.exports = {
  plugins: [konstaColors],
  theme: {
    colors: {
      'brand-primary': '#007AFF',
      'brand-secondary': '#FF2D55',
      // Additional brand colors
    }
  }
};
```

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

### Component Dark Mode CSS Variants

Source: https://github.com/konstaui/konsta/blob/master/_autodocs/10-color-system.md

Provides an example of how component colors automatically include dark mode variants. This CSS demonstrates a base color for light mode and a different color for dark mode using the `.dark` class.

```css
.button {
  color: text-md-light-primary;
}

.dark .button {
  color: text-md-dark-primary;
}
```

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

### Run React Kitchen Sink with npm

Source: https://github.com/konstaui/konsta/blob/master/README.md

Execute the 'react' npm script to build the development version of the Konsta UI React package and launch the React Kitchen Sink for testing.

```bash
npm run react
```

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

### Basic Table Usage

Source: https://github.com/konstaui/konsta/blob/master/_autodocs/09-feedback-table.md

Demonstrates the basic structure for creating a table with headers and data rows.

```javascript
<Table>
  <TableHead>
    <TableRow>
      <TableCell header>Name</TableCell>
      <TableCell header>Email</TableCell>
      <TableCell header>Status</TableCell>
    </TableRow>
  </TableHead>
  <TableBody>
    <TableRow>
      <TableCell>John Doe</TableCell>
      <TableCell>john@example.com</TableCell>
      <TableCell>Active</TableCell>
    </TableRow>
    <TableRow>
      <TableCell>Jane Smith</TableCell>
      <TableCell>jane@example.com</TableCell>
      <TableCell>Active</TableCell>
    </TableRow>
  </TableBody>
</Table>
```

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

### Build Production Version with npm

Source: https://github.com/konstaui/konsta/blob/master/README.md

Use the 'build' npm script to create production-ready compiled assets. Compiled results will be available in the 'package/' folder.

```bash
npm run build
```

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

### NavbarBackLink Minimal Usage

Source: https://github.com/konstaui/konsta/blob/master/_autodocs/05-navigation.md

A minimal NavbarBackLink example where only the href is provided. The text will default to an arrow icon.

```javascript
<Navbar 
  title="Page"
  left={<NavbarBackLink href="/" />}
/>
```

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

### TypeScript Interface Pattern

Source: https://github.com/konstaui/konsta/blob/master/_autodocs/INDEX.md

Example of a TypeScript interface for component props. This pattern is used for all 61 components in `src/types/`.

```typescript
interface Props {
  component?: string | React.ComponentType<any>;
  colors?: { [key: string]: string };
  // Component-specific props
}
```

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

### Import Konsta UI Block Components

Source: https://github.com/konstaui/konsta/blob/master/_autodocs/03-app-container.md

Import necessary components from the konsta/react library. Ensure these components are available in your project.

```javascript
import { Block, BlockHeader, BlockTitle, BlockFooter } from 'konsta/react';
```

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

### Import Konsta List Components

Source: https://github.com/konstaui/konsta/blob/master/_autodocs/06-lists.md

Import necessary components from the konsta/react library for building lists.

```javascript
import { List, ListGroup, ListItem, ListButton, ListInput } from 'konsta/react';
```

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

### Import Glass Component

Source: https://github.com/konstaui/konsta/blob/master/_autodocs/09-feedback-table.md

Import the Glass component from the konsta/react library.

```javascript
import { Glass } from 'konsta/react';
```

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

### Breadcrumbs with Collapsed Items

Source: https://github.com/konstaui/konsta/blob/master/_autodocs/05-navigation.md

Example of using BreadcrumbsCollapsed to manage a long list of breadcrumb items, showing a subset and an option to expand.

```javascript
<Breadcrumbs>
  <BreadcrumbsItem href="/">Home</BreadcrumbsItem>
  <BreadcrumbsSeparator />
  <BreadcrumbsCollapsed items={[
    { href: '/', text: 'Level 1' },
    { href: '/', text: 'Level 2' }
  ]} />
  <BreadcrumbsSeparator />
  <BreadcrumbsItem active>Current</BreadcrumbsItem>
</Breadcrumbs>
```

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

### Import Searchbar Component

Source: https://github.com/konstaui/konsta/blob/master/_autodocs/07-form-inputs.md

Import the Searchbar component from the konsta/react library.

```javascript
import { Searchbar } from 'konsta/react';
```

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

### Import Navbar Components

Source: https://github.com/konstaui/konsta/blob/master/_autodocs/05-navigation.md

Import the necessary Navbar and NavbarBackLink components from the konsta/react library.

```javascript
import { Navbar, NavbarBackLink } from 'konsta/react';
```

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

### KonstaStore Svelte Usage

Source: https://github.com/konstaui/konsta/blob/master/_autodocs/12-utilities-helpers.md

Example of how to import and use the konstaStore in a Svelte component to display theme information. Access store values using the '$' prefix.

```svelte
<script>
import { konstaStore } from 'konsta/svelte';
</script>

<div>Theme: {$konstaStore.theme}</div>
```

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

### Import Icon Component

Source: https://github.com/konstaui/konsta/blob/master/_autodocs/04-buttons-links.md

Import the Icon component from konsta/react.

```javascript
import { Icon } from 'konsta/react';
```

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

### konstaStore (Svelte)

Source: https://github.com/konstaui/konsta/blob/master/_autodocs/12-utilities-helpers.md

A Svelte writable store for managing Konsta UI context, including theme and touch ripple settings.

```APIDOC
## konstaStore (Svelte)

### Description
A Svelte writable store for managing Konsta UI context, including theme and touch ripple settings.

### Type
```javascript
export const konstaStore = writable({
  theme: 'material',
  dark: false,
  materialTouchRipple: true,
  iosHoverHighlight: true
});
```

### Usage
```svelte
<script>
import { konstaStore } from 'konsta/svelte';
</script>

<div>Theme: {$konstaStore.theme}</div>
```
```

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

### Import Konsta Actions Components

Source: https://github.com/konstaui/konsta/blob/master/_autodocs/08-dialogs-overlays.md

Import the necessary components for creating actions popups from the konsta/react library.

```javascript
import { Actions, ActionsGroup, ActionsButton, ActionsLabel } from 'konsta/react';
```

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

### Import Message Components

Source: https://github.com/konstaui/konsta/blob/master/_autodocs/08-dialogs-overlays.md

Import the necessary components for message display from konsta/react.

```javascript
import { Message, Messages, MessagesTitle } from 'konsta/react';
```

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

### FAB as a Link

Source: https://github.com/konstaui/konsta/blob/master/_autodocs/04-buttons-links.md

Demonstrates using the FAB component as a clickable link, positioned at the bottom-left. It includes a 'compose' icon and links to the '/compose' route.

```javascript
<Fab position="left-bottom" href="/compose">
  <Icon>compose</Icon>
</Fab>
```

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

### Enabling Dark Mode with KonstaProvider

Source: https://github.com/konstaui/konsta/blob/master/_autodocs/10-color-system.md

Illustrates how to enable dark mode for the entire application by setting the `dark` prop to `true` on the KonstaProvider. Content within will utilize Tailwind's `dark:` variants.

```javascript
<KonstaProvider dark={true}>
  <App>
    {/* Content uses dark: variants */}
  </App>
</KonstaProvider>
```

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

### Import Panel Component

Source: https://github.com/konstaui/konsta/blob/master/_autodocs/03-app-container.md

Import the Panel component from the konsta/react library.

```javascript
import { Panel } from 'konsta/react';
```

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

### Import Toast Component

Source: https://github.com/konstaui/konsta/blob/master/_autodocs/08-dialogs-overlays.md

Import the Toast component from the konsta/react library.

```javascript
import { Toast } from 'konsta/react';
```

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

### Progressbar Component Usage

Source: https://github.com/konstaui/konsta/blob/master/_autodocs/09-feedback-table.md

Use the Progressbar component to show task progress. It can display a determinate progress value or an infinite/indeterminate state. The example shows how to update progress dynamically.

```javascript
const [progress, setProgress] = useState(0);

<Progressbar progress={progress} />

<Progressbar infinite={true} />

// Update progress
useEffect(() => {
  const interval = setInterval(() => {
    setProgress(p => p >= 100 ? 0 : p + 10);
  }, 500);
  return () => clearInterval(interval);
}, []);
```

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

### Svelte Store Implementation

Source: https://github.com/konstaui/konsta/blob/master/_autodocs/02-provider-hooks.md

The Svelte writable store `konstaStore` manages the application's theme and configuration state. It is initialized with default values.

```javascript
export const konstaStore = writable({
  theme: 'material',
  dark: false,
  materialTouchRipple: true,
  iosHoverHighlight: true
});
```

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

### Get Konsta Context in Vue

Source: https://github.com/konstaui/konsta/blob/master/_autodocs/12-utilities-helpers.md

The `useContext` composable provides access to the Konsta theme and dark mode settings within Vue 3 components. It returns reactive references for these properties.

```vue
<script setup>
import { useContext } from 'konsta/vue';

const { theme, dark } = useContext();
</script>

<template>
  <div>Theme: {{ theme }}</div>
</template>
```

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

### Get Theme-Appropriate CSS Classes

Source: https://github.com/konstaui/konsta/blob/master/_autodocs/12-utilities-helpers.md

Returns CSS classes tailored for either iOS or Material Design themes. Use this hook to apply platform-specific styling like font sizes.

```javascript
import { useThemeClasses } from 'konsta/react';

const classes = useThemeClasses(
  'text-[17px]',           // iOS font size
  'text-[16px]'            // Material font size
);
```

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

### Import Progressbar Component

Source: https://github.com/konstaui/konsta/blob/master/_autodocs/09-feedback-table.md

Import the Progressbar component from the konsta/react library.

```javascript
import { Progressbar } from 'konsta/react';
```

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

### Import Preloader Component

Source: https://github.com/konstaui/konsta/blob/master/_autodocs/09-feedback-table.md

Import the Preloader component from the konsta/react library.

```javascript
import { Preloader } from 'konsta/react';
```

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

### Get Dark Mode CSS Classes

Source: https://github.com/konstaui/konsta/blob/master/_autodocs/12-utilities-helpers.md

Returns appropriate CSS classes for dark or light mode based on the current theme. Import and use this hook within your React components.

```javascript
import { useDarkClasses } from 'konsta/react';

const bgClasses = useDarkClasses(
  'dark:bg-gray-900',
  'bg-white'
);
// Returns combined classes for dark and light modes
```

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

### Import Popover Component

Source: https://github.com/konstaui/konsta/blob/master/_autodocs/08-dialogs-overlays.md

Import the Popover component from the konsta/react library.

```javascript
import { Popover } from 'konsta/react';
```

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

### Notification Component Usage

Source: https://github.com/konstaui/konsta/blob/master/_autodocs/08-dialogs-overlays.md

Example of using the Notification component for standalone alerts. It supports titles, subtitles, text, icons, and a close button. The 'opened' state and 'onClose' handler are crucial for its behavior.

```javascript
const [notificationOpened, setNotificationOpened] = useState(false);

<Notification
  title="New Message"
  text="You have a new message from John"
  icon={<Icon>mail</Icon>}
  opened={notificationOpened}
  onClose={() => setNotificationOpened(false)}
/>
```

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

### Import Konsta Toolbar Component

Source: https://github.com/konstaui/konsta/blob/master/_autodocs/05-navigation.md

Import the Toolbar and ToolbarPane components from the konsta/react library.

```javascript
import { Toolbar, ToolbarPane } from 'konsta/react';
```

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

### Using Color CSS Variables with Tailwind Classes

Source: https://github.com/konstaui/konsta/blob/master/_autodocs/10-color-system.md

Components can reference the generated CSS variables using Tailwind CSS classes for background colors. This example shows how to apply primary colors for light and dark modes.

```javascript
<Button colors={{
  fillBgMaterial: 'bg-md-light-primary dark:bg-md-dark-primary'
}}>
  Click me
</Button>
```

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

### Import Link Component

Source: https://github.com/konstaui/konsta/blob/master/_autodocs/04-buttons-links.md

Import the Link component from konsta/react.

```javascript
import { Link } from 'konsta/react';
```

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

### Import Table Components

Source: https://github.com/konstaui/konsta/blob/master/_autodocs/09-feedback-table.md

Import necessary components from the konsta/react library to use the Table component.

```javascript
import { Table, TableHead, TableBody, TableRow, TableCell } from 'konsta/react';
```

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

### Konsta UI Button Component Type Definition Structure

Source: https://github.com/konstaui/konsta/blob/master/_autodocs/11-types-and-interfaces.md

Provides a structural example of the TypeScript interface for Konsta UI's `Button` component props. This interface defines various properties for styling, behavior, and theming, including extensive color variants for iOS and Material Design.

```typescript
interface Props {
  component?: string | React.ComponentType<any>;
  colors?: {
    textIos?: string;
    textMaterial?: string;
    fillTextIos?: string;
    fillTextMaterial?: string;
    fillBgIos?: string;
    fillBgMaterial?: string;
    // ... more colors
  };
  href?: string;
  outline?: boolean;
  outlineIos?: boolean;
  outlineMaterial?: boolean;
  clear?: boolean;
  clearIos?: boolean;
  clearMaterial?: boolean;
  tonal?: boolean;
  tonalIos?: boolean;
  tonalMaterial?: boolean;
  rounded?: boolean;
  roundedIos?: boolean;
  roundedMaterial?: boolean;
  small?: boolean;
  smallIos?: boolean;
  smallMaterial?: boolean;
  large?: boolean;
  largeIos?: boolean;
  largeMaterial?: boolean;
  raised?: boolean;
  raisedIos?: boolean;
  raisedMaterial?: boolean;
  inline?: boolean;
  segmented?: boolean;
  segmentedStrong?: boolean;
  segmentedActive?: boolean;
  disabled?: boolean;
}
```

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

### Import Messagebar Component

Source: https://github.com/konstaui/konsta/blob/master/_autodocs/08-dialogs-overlays.md

Import the Messagebar component from konsta/react for message input functionality.

```javascript
import { Messagebar } from 'konsta/react';
```

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

### Import Card Component

Source: https://github.com/konstaui/konsta/blob/master/_autodocs/03-app-container.md

Import the Card component from the 'konsta/react' library.

```javascript
import { Card } from 'konsta/react';
```

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

### Import Stepper Component

Source: https://github.com/konstaui/konsta/blob/master/_autodocs/07-form-inputs.md

Import the Stepper component from the konsta/react library.

```javascript
import { Stepper } from 'konsta/react';
```

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

### Import Radio Component

Source: https://github.com/konstaui/konsta/blob/master/_autodocs/07-form-inputs.md

Import the Radio component from the konsta/react library.

```javascript
import { Radio } from 'konsta/react';
```

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

### Button Component API

Source: https://github.com/konstaui/konsta/blob/master/_autodocs/04-buttons-links.md

This documentation outlines the available props for the Konsta UI Button component, detailing their types, default values, and descriptions. It covers basic styling, size adjustments, states, and link functionality.

```APIDOC
## Button Component API

### Description
Provides a versatile button component with support for multiple styles (fill, outline, clear, tonal), sizes, and states. It can also function as a link.

### Props

#### Core Props
- **component** (string | React.ComponentType) - Optional - HTML element or component to render. Defaults to `'button'`.
- **href** (string) - Optional - Makes the button render as a link and sets the link's `href` attribute.
- **disabled** (boolean) - Optional - Disables the button. Defaults to `false`.

#### Style Props
- **outline** (boolean) - Optional - Applies an outline style (no background fill). Defaults to `false`.
- **clear** (boolean) - Optional - Applies a clear style (transparent background). Defaults to `false`.
- **tonal** (boolean) - Optional - Applies a tonal style (semi-transparent background). Defaults to `false`.
- **rounded** (boolean) - Optional - Applies rounded corners to the button. Defaults to `false`.
- **raised** (boolean) - Optional - Applies a shadow to the button, making it appear raised. Defaults to `false`.
- **inline** (boolean) - Optional - Sets the display to `inline-flex`. Defaults to `false`.

#### Size Props
- **small** (boolean) - Optional - Applies a small size to the button. Defaults to `false`.
- **large** (boolean) - Optional - Applies a large size to the button. Defaults to `false`.

#### Segmented Control Props
- **segmented** (boolean) - Optional - Styles the button as part of a segmented control. Defaults to `false`.
- **segmentedStrong** (boolean) - Optional - Applies a stronger style to a segmented button. Defaults to `false`.
- **segmentedActive** (boolean) - Optional - Marks a segmented button as active. Defaults to `false`.

#### Platform-Specific Style Props
- **outlineIos** (boolean) - Optional - Applies outline style specifically for iOS. Defaults to `false`.
- **outlineMaterial** (boolean) - Optional - Applies outline style specifically for Material Design. Defaults to `false`.
- **clearIos** (boolean) - Optional - Applies clear style specifically for iOS. Defaults to `false`.
- **clearMaterial** (boolean) - Optional - Applies clear style specifically for Material Design. Defaults to `false`.
- **tonalIos** (boolean) - Optional - Applies tonal style specifically for iOS. Defaults to `false`.
- **tonalMaterial** (boolean) - Optional - Applies tonal style specifically for Material Design. Defaults to `false`.
- **roundedIos** (boolean) - Optional - Applies rounded corners specifically for iOS. Defaults to `false`.
- **roundedMaterial** (boolean) - Optional - Applies rounded corners specifically for Material Design. Defaults to `false`.
- **smallIos** (boolean) - Optional - Applies small size specifically for iOS. Defaults to `false`.
- **smallMaterial** (boolean) - Optional - Applies small size specifically for Material Design. Defaults to `false`.
- **largeIos** (boolean) - Optional - Applies large size specifically for iOS. Defaults to `false`.
- **largeMaterial** (boolean) - Optional - Applies large size specifically for Material Design. Defaults to `false`.
- **raisedIos** (boolean) - Optional - Applies raised style specifically for iOS. Defaults to `false`.
- **raisedMaterial** (boolean) - Optional - Applies raised style specifically for Material Design. Defaults to `false`.

### Colors Object
An optional object to customize button colors. All properties within this object are optional strings representing Tailwind CSS classes.

- **textIos** (string) - Default: `'text-primary'`
- **textMaterial** (string) - Default: `'text-md-light-primary dark:text-md-dark-primary'`
- **fillTextIos** (string) - Default: `'text-white'`
- **fillTextMaterial** (string) - Default: `'text-md-light-on-primary dark:text-md-dark-on-primary'`
- **fillBgIos** (string) - Default: `'bg-primary active:bg-ios-primary-shade'`
- **fillBgMaterial** (string) - Default: `'bg-md-light-primary dark:bg-md-dark-primary'`
- **clearBgIos** (string) - Default: `'bg-transparent active:bg-primary/15'`
- **outlineBgIos** (string) - Default: `'bg-transparent active:bg-primary/15'`
- **tonalBgIos** (string) - Default: `'bg-primary/15 active:bg-primary/25'`
- **disabledText** (string) - Default: `'text-black/30 dark:text-white/30'`
- **disabledBg** (string) - Default: `'bg-black/10 dark:bg-white/10'`

### Usage Examples

**Fill Buttons**:
```jsx
<Button>Default Button</Button>
<Button large>Large Button</Button>
<Button small>Small Button</Button>
<Button rounded>Rounded Button</Button>
<Button raised>Raised Button</Button>
<Button disabled>Disabled Button</Button>
```

**Outline Buttons**:
```jsx
<Button outline>Outline Button</Button>
<Button outline rounded>Outline Rounded</Button>
<Button outlineIos>iOS Outline Only</Button>
<Button outlineMaterial>Material Outline Only</Button>
```

**Clear Buttons**:
```jsx
<Button clear>Clear Button</Button>
<Button clear large>Clear Large</Button>
```

**Tonal Buttons**:
```jsx
<Button tonal>Tonal Button</Button>
<Button tonal rounded>Tonal Rounded</Button>
```

**Link Buttons**:
```jsx
<Button href="/page">Link Button</Button>
<Button href="/page" outline>Outline Link Button</Button>
```

**Segmented Control**:
```jsx
<div className="flex">
  <Button segmented segmentedStrong segmentedActive>
    Active
  </Button>
  <Button segmented>
    Inactive
  </Button>
</div>
```
```

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

### Import App Component

Source: https://github.com/konstaui/konsta/blob/master/_autodocs/03-app-container.md

Import the App component for React, Vue, or Svelte applications.

```javascript
import { App } from 'konsta/react';
// Vue: import { kApp } from 'konsta/vue';
// Svelte: import { kApp } from 'konsta/svelte';
```

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

### Import Button Component

Source: https://github.com/konstaui/konsta/blob/master/_autodocs/04-buttons-links.md

Import the Button component from the konsta/react library.

```javascript
import { Button } from 'konsta/react';
```

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

### Import Dialog Components

Source: https://github.com/konstaui/konsta/blob/master/_autodocs/08-dialogs-overlays.md

Import the Dialog and DialogButton components from the konsta/react library.

```javascript
import { Dialog, DialogButton } from 'konsta/react';
```