### Install Franken UI with npm

Source: https://github.com/franken-ui/ui/blob/master/_autodocs/exports.md

Command to install Franken UI as a development dependency. Includes an example with necessary peer dependencies.

```bash
npm install -D franken-ui

# With peer dependencies
npm install -D tailwindcss postcss autoprefixer lodash postcss-js
```

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

### Install Peer Dependencies

Source: https://github.com/franken-ui/ui/blob/master/_autodocs/api-reference/cli.md

After initializing Franken UI, ensure you have the necessary peer dependencies installed for Tailwind CSS to function correctly.

```bash
npm install -D tailwindcss postcss autoprefixer
```

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

### Install Franken UI and Dependencies

Source: https://github.com/franken-ui/ui/blob/master/_autodocs/INDEX.md

Install Franken UI, Tailwind CSS, and PostCSS as development dependencies using npm.

```bash
npm install -D franken-ui tailwindcss postcss
```

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

### Complete Franken UI Configuration Example

Source: https://github.com/franken-ui/ui/blob/master/_autodocs/configuration.md

A comprehensive example demonstrating all configuration options for Franken UI, including custom themes and extensions. Use this as a reference for advanced customization.

```typescript
// tailwind.config.ts with all options
import type { Config } from 'tailwindcss';
import frankenUI from 'franken-ui';

const myCompanyTheme = {
  '.uk-theme-mycompany': {
    '--background': '0 0% 100%',
    '--foreground': '240 10% 3.9%',
    '--primary': '265 100% 50%',
    '--primary-foreground': '0 0% 100%',
    // ... all 17+ required tokens
  },
  '.dark.uk-theme-mycompany': {
    '--background': '240 10% 3.9%',
    '--foreground': '0 0% 98%',
    '--primary': '265 100% 60%',
    '--primary-foreground': '0 0% 0%',
    // ... all 17+ required tokens
  }
};

const customExtension = (context, config) => {
  context.components['custom-badge'] = {
    '.custom-badge': {
      'display': 'inline-block',
      'padding': '0.25rem 0.5rem',
      'border-radius': 'var(--uk-global-radius)',
      'background-color': `hsl(var(--${config.color}))`
    }
  };
  return context;
};

export default {
  content: ['./src/**/*.{html,js,svelte,ts}'],
  theme: {
    extend: {}
  },
  plugins: [
    frankenUI({
      preflight: true,
      layer: true,
      layerExceptions: ['utility', 'custom-badge'],
      customPalette: myCompanyTheme,
      extensions: [
        [customExtension, { color: 'primary' }]
      ]
    })
  ]
} satisfies Config;
```

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

### Example tailwind.config.js Output

Source: https://github.com/franken-ui/ui/blob/master/_autodocs/api-reference/cli.md

This is an example of the `tailwind.config.js` file generated by the `franken-ui init` command. It includes the Franken UI plugin with default settings.

```javascript
import frankenUI from 'franken-ui/plugin';

export default {
  content: ['./src/**/*.{html,js,svelte,ts}'],
  theme: {
    extend: {}
  },
  plugins: [
    frankenUI({
      preflight: true,
      layer: false
    })
  ]
};
```

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

### Example postcss.config.cjs Output

Source: https://github.com/franken-ui/ui/blob/master/_autodocs/api-reference/cli.md

This is an example of the `postcss.config.cjs` file that can be generated by the `franken-ui init --postcss` command. It configures PostCSS with Tailwind CSS and Autoprefixer.

```javascript
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {}
  }
};
```

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

### CLI Initialization Example with Output

Source: https://github.com/franken-ui/ui/blob/master/_autodocs/api-reference/cli.md

Demonstrates the output and behavior of the `franken-ui init` command, including warnings when configuration files already exist.

```bash
$ cd my-project
$ npx franken-ui init
Created config file: tailwind.config.js

$ npx franken-ui init --postcss
Created config file: postcss.config.cjs

$ npx franken-ui init --postcss  # Run again
tailwind.config.js already exists  # Warning
postcss.config.cjs already exists  # Warning
```

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

### Basic Button Examples

Source: https://github.com/franken-ui/ui/blob/master/_autodocs/api-reference/component-button.md

Demonstrates the basic usage of primary and secondary buttons, as well as link-based buttons.

```html
<button class="uk-btn uk-btn-primary">Click me</button>
<a href="#" class="uk-btn uk-btn-secondary">Link Button</a>
```

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

### Custom Extension Usage Example

Source: https://github.com/franken-ui/ui/blob/master/_autodocs/types.md

Demonstrates how to create and use a custom extension to modify component styles based on configuration. This example adds a custom component style if darkMode is enabled.

```typescript
// Create a custom extension
const myExtension: Extension = (context, config) => {
  // Modify components
  if (config.darkMode) {
    context.components['my-custom'] = {
      '.my-custom': {
        'color': 'hsl(var(--foreground))'
      }
    };
  }
  
  return context;
};

// Use in plugin
frankenUI({
  extensions: [
    [myExtension, { darkMode: true }]
  ]
});
```

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

### Example Palette Structure

Source: https://github.com/franken-ui/ui/blob/master/_autodocs/types.md

Illustrates the structure of a palette object, showing theme selectors and CSS custom properties for colors.

```typescript
{
  '.uk-theme-zinc': { '--background': '0 0% 100%', ... },
  '.dark.uk-theme-zinc': { '--background': '240 10% 3.9%', ... },
  '.uk-theme-slate': { '--background': '0 0% 100%', ... },
  '.dark.uk-theme-slate': { '--background': '222.2 84% 4.9%', ... },
  // ... more themes
}
```

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

### Extensions Usage Example

Source: https://github.com/franken-ui/ui/blob/master/_autodocs/types.md

Shows how to create an array of extension tuples, each with a plugin function and its configuration, and then pass this array to the frankenUI function. Ensure extension functions and their configs are correctly paired.

```typescript
const extensions: Extensions = [
  [customThemePlugin, { themes: ['dark', 'light'] }],
  [componentPlugin, { components: ['custom'] }],
  [utilityPlugin, { utilities: ['spacing'] }]
];

frankenUI({
  extensions
});
```

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

### Example of a Component type

Source: https://github.com/franken-ui/ui/blob/master/_autodocs/types.md

This example shows how to define styles for a button component using the `Component` type. It includes base styles, hover states, and modifier classes.

```typescript
const button: Component = {
  '.uk-btn': {
    'display': 'inline-flex',
    'padding': '0.5rem'
  },
  '.uk-btn:hover': {
    'background-color': 'blue'
  },
  '.uk-btn-primary': {
    '--uk-btn-bg': 'hsl(var(--primary))'
  }
};
```

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

### Import and access predefined components

Source: https://github.com/franken-ui/ui/blob/master/_autodocs/types.md

This example demonstrates how to import the `components` object and access styles for predefined components like 'button', 'form', and 'accordion'.

```typescript
import { components } from 'franken-ui';

const buttonStyles = components.button;
const formStyles = components.form;
const accordion = components.accordion;
```

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

### Defining and Using a Custom Theme

Source: https://github.com/franken-ui/ui/blob/master/_autodocs/types.md

Demonstrates how to define a custom theme object conforming to the `Colors` type and provides a commented example of how these variables can be applied in CSS. The CSS example shows direct usage and conversion to `hsl()` function.

```typescript
// Define a theme
const myTheme: Colors = {
  '--background': '0 0% 100%',
  '--foreground': '240 10% 3.9%',
  '--primary': '240 5.9% 10%',
  '--primary-foreground': '0 0% 98%',
  // ... all 17 required tokens
};

// Use in CSS (via palette generator)
// .uk-theme-custom {
//   --background: 0 0% 100%;
//   color: hsl(var(--foreground));  // Converts to CSS
// }
```

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

### ExtensionConfig Usage Example

Source: https://github.com/franken-ui/ui/blob/master/_autodocs/types.md

Illustrates how to define an ExtensionConfig object with various data types for settings. This configuration is passed to extensions.

```typescript
const config: ExtensionConfig = {
  darkMode: true,
  customColors: ['red', 'blue'],
  spacing: { small: '0.5rem', large: '2rem' }
};
```

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

### Vite Plugin Configuration

Source: https://github.com/franken-ui/ui/blob/master/_autodocs/types.md

Example of configuring the Franken UI Vite plugin, disabling preflight and layering, and specifying layer exceptions.

```javascript
export default {
  plugins: [
    frankenVitePlugin({
      preflight: false,
      layer: false,
      layerExceptions: ['utility', 'custom']
    })
  ]
};
```

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

### Base Styles Usage Example

Source: https://github.com/franken-ui/ui/blob/master/_autodocs/api-reference/context.md

Demonstrates how base styles for the body and focus-visible elements are generated in CSS, utilizing theme variables for typography and focus rings.

```css
/* Generated in CSS */
body {
  font-size: var(--uk-global-font-size);
  line-height: var(--uk-global-leading);
}

.uk-btn:focus-visible {
  outline-width: var(--uk-global-focus-outline-width, 2px);
  outline-style: var(--uk-global-focus-outline-style, dotted);
  outline-color: hsl(var(--ring));
  transition-duration: 150ms;
}

```

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

### Register Custom Component Extension

Source: https://github.com/franken-ui/ui/blob/master/_autodocs/configuration.md

Shows how to define and register a custom component extension within the Franken UI configuration. This example adds a 'my-custom' component with configurable text color.

```javascript
const customComponentPlugin = (context, config) => {
  // Add a custom component
  context.components['my-custom'] = {
    '.my-custom': {
      'display': 'block',
      'color': config.textColor || 'hsl(var(--foreground))'
    }
  };
  
  return context;
};

export default {
  plugins: [
    frankenUI({
      extensions: [
        [customComponentPlugin, {
          textColor: 'hsl(var(--primary))'
        }]
      ]
    })
  ]
};
```

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

### Basic HTML Markup with Franken UI Classes

Source: https://github.com/franken-ui/ui/blob/master/_autodocs/README.md

Example of applying Franken UI classes to HTML elements for styling buttons and other components. Supports dark mode and custom themes.

```html
<body class="dark uk-theme-slate">
  <button class="uk-btn uk-btn-primary uk-btn-lg">
    <svg class="uk-icon">...</svg>
    Click me
  </button>
</body>
```

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

### Assign styles to a custom component key

Source: https://github.com/franken-ui/ui/blob/master/_autodocs/types.md

This example shows how to assign styles to a custom component key using bracket notation. This allows for the creation of new components not included in the predefined set.

```typescript
components['my-custom-component'] = {
  '.my-custom': { /* rules */ }
};
```

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

### Button Component CSS Variables

Source: https://github.com/franken-ui/ui/blob/master/_autodocs/configuration.md

Example of CSS variables specific to the button component for customization.

```css
--uk-btn-display: inline-flex;
--uk-btn-height: 2.5rem;
--uk-btn-padding: 0.625rem 1.25rem;
--uk-btn-font-size: 1rem;
--uk-btn-radius: 0.375rem;
--uk-btn-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
```

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

### Peer Dependencies for Franken UI

Source: https://github.com/franken-ui/ui/blob/master/_autodocs/exports.md

Specifies the required external dependencies for Franken UI. Ensure these are installed in your project for the plugin to function correctly.

```json
{
  "peerDependencies": {
    "lodash": "^4.17.21",
    "postcss": "^8.0.0",
    "postcss-combine-duplicated-selectors": "^10.0.3",
    "postcss-js": "^4.0.0",
    "postcss-sort-media-queries": "^5.2.0",
    "tailwindcss": "^3.4.9 || ^4.0.0"
  }
}
```

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

### Configure Franken UI Plugin in Tailwind

Source: https://github.com/franken-ui/ui/blob/master/_autodocs/api-reference/tailwind-plugin.md

Integrate the Franken UI plugin into your `tailwind.config.js` file. This example enables preflight, disables layer wrapping, and defines a custom color palette.

```javascript
// tailwind.config.js
import frankenPlugin from 'franken-ui';

export default {
  content: ['./src/**/*.{html,js,svelte}'],
  theme: {
    extend: {}
  },
  plugins: [
    frankenPlugin({
      preflight: true,
      layer: false,
      customPalette: {
        '.uk-theme-custom': {
          '--primary': '220 90% 50%',
          '--primary-foreground': '0 0% 100%',
          // ... other color tokens
        }
      }
    })
  ]
};
```

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

### Configure Custom Palette

Source: https://github.com/franken-ui/ui/blob/master/_autodocs/configuration.md

Example of configuring the `customPalette` option within the Franken UI plugin. This defines a new theme named `.uk-theme-brand` with specific primary colors for both light and dark modes.

```javascript
export default {
  plugins: [
    frankenUI({
      customPalette: {
        '.uk-theme-brand': {
          '--primary': '265 100% 50%',        // Purple
          '--primary-foreground': '0 0% 100%',
          // ... all other required tokens
        },
        '.dark.uk-theme-brand': {
          '--primary': '265 100% 60%',        // Lighter purple for dark
          '--primary-foreground': '0 0% 0%',
          // ... all other required tokens for dark
        }
      }
    })
  ]
};
```

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

### Create Basic CSS Rules with CSSRuleObject

Source: https://github.com/franken-ui/ui/blob/master/_autodocs/types.md

Example of defining basic CSS properties and values using the CSSRuleObject type. Values can be strings, arrays of strings, or null.

```typescript
// Basic CSS rules
const buttonStyles: CSSRuleObject = {
  '.uk-btn': {
    'display': 'inline-flex',
    'padding': '0.5rem',
    'background-color': 'hsl(var(--primary))'
  }
};
```

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

### Pre-defined Color Themes

Source: https://github.com/franken-ui/ui/blob/master/_autodocs/exports.md

Example structure of the 'variables' object, which contains pre-defined color themes indexed by CSS selectors. Each theme defines CSS custom properties for styling.

```typescript
{
  '.uk-theme-zinc': { '--primary': '240 5.9% 10%', ... },
  '.dark.uk-theme-zinc': { '--primary': '0 0% 98%', ... },
  '.uk-theme-slate': { '--primary': '222.2 47.4% 11.2%', ... },
  '.dark.uk-theme-slate': { '--primary': '210 40% 98%', ... },
  // ... 13 more pre-built themes
}
```

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

### Palette Generator Usage Example

Source: https://github.com/franken-ui/ui/blob/master/_autodocs/api-reference/palette-generator.md

Demonstrates how to use the palette generator function by providing theme variables. The function returns an object containing the original variables plus generated SVG data URLs for form controls.

```typescript
import palette from 'franken-ui/palette';

const variables = {
  '.uk-theme-custom': {
    '--primary': '220 90% 50%',
    '--primary-foreground': '0 0% 100%',
    '--background': '0 0% 100%',
    // ... all 18+ color tokens
  },
  '.dark.uk-theme-custom': {
    '--primary': '220 80% 60%',
    '--primary-foreground': '0 0% 0%',
    // ...
  }
};

const result = palette(variables);
// result now includes original variables plus:
// result['.uk-theme-custom']['--uk-form-checkbox-image'] = 'url("data:image/svg+xml,...")'
// result['.uk-theme-custom']['--uk-form-checkbox-image-indeterminate'] = 'url("data:image/svg+xml,...")'
// result['.uk-theme-custom']['--uk-form-radio-image'] = 'url("data:image/svg+xml,...")'
// etc.
```

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

### HSL Color Format Example

Source: https://github.com/franken-ui/ui/blob/master/_autodocs/types.md

Illustrates the standard HSL (Hue, Saturation, Lightness) format used for color values within the `Colors` type. Values range from 0-360 for hue, 0-100% for saturation, and 0-100% for lightness.

```typescript
'220 90% 50%'
```

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

### Initialize Franken UI Project

Source: https://github.com/franken-ui/ui/blob/master/_autodocs/exports.md

Use the `npx franken-ui init` command to initialize your project. Options include `--postcss` to set up PostCSS configuration and `--force` to overwrite existing files.

```bash
npx franken-ui init [options]
```

```bash
npx franken-ui init --postcss
```

```bash
npx franken-ui init --force
```

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

### Initialize Franken UI

Source: https://github.com/franken-ui/ui/blob/master/_autodocs/INDEX.md

Initialize Franken UI in your project. Use the --postcss flag if you are using PostCSS.

```bash
npx franken-ui init
```

```bash
npx franken-ui init --postcss
```

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

### Text Button

Source: https://github.com/franken-ui/ui/blob/master/_autodocs/api-reference/component-button.md

Provides an example of a button styled with a text-only appearance.

```html
<button class="uk-btn uk-btn-text">Dismiss</button>
```

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

### Initialize Franken UI Configuration

Source: https://github.com/franken-ui/ui/blob/master/_autodocs/api-reference/cli.md

Use this command to set up the necessary configuration files for Franken UI in your project. It creates `tailwind.config.js` and can optionally create `postcss.config.cjs`.

```bash
npx franken-ui init
```

```bash
npx franken-ui init --postcss
```

```bash
npx franken-ui init -p
```

```bash
npx franken-ui init --force
```

```bash
npx franken-ui init -f
```

```bash
npx franken-ui init -p -f
```

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

### Initialize Franken UI Theme and Mode

Source: https://github.com/franken-ui/ui/blob/master/src/app.html

Applies theme and mode classes to the HTML element. Reads preferences from local storage, falling back to system preferences for dark mode. Ensure '__FRANKEN__' is correctly set in localStorage.

```javascript
const htmlElement = document.documentElement;
const __FRANKEN__ = JSON.parse(localStorage.getItem('__FRANKEN__') || '{}');
if ( __FRANKEN__.mode === 'dark' || (!__FRANKEN__.mode && window.matchMedia('(prefers-color-scheme: dark)').matches) ) {
  htmlElement.classList.add('dark');
} else {
  htmlElement.classList.remove('dark');
}
htmlElement.classList.add(__FRANKEN__.theme || 'uk-theme-zinc');
htmlElement.classList.add(__FRANKEN__.radii || 'uk-radii-md');
htmlElement.classList.add(__FRANKEN__.shadows || 'uk-shadows-sm');
htmlElement.classList.add(__FRANKEN__.font || 'uk-font-sm');
htmlElement.classList.add(__FRANKEN__.chart || 'uk-chart-base');
```

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

### Basic PostCSS Configuration

Source: https://github.com/franken-ui/ui/blob/master/_autodocs/configuration.md

Set up PostCSS with Tailwind CSS and Autoprefixer for optimal CSS processing.

```javascript
export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {}
  }
};
```

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

### Context Functions

Source: https://github.com/franken-ui/ui/blob/master/_autodocs/INDEX.md

Utility functions for generating color palettes and initializing the CLI.

```APIDOC
## Context Functions

### `palettes(options?: Options)`

Generate color palettes.

### `init(args)`

CLI initialization command.
```

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

### Context Creation and Extension

Source: https://github.com/franken-ui/ui/blob/master/_autodocs/types.md

Illustrates how the styling context is initialized and how extensions can be applied to modify it. Extensions are functions that transform the context.

```typescript
let context: Context = {
  theme,
  base,
  palettes: palettes(options),
  components
};

// Apply extensions
if (options.extensions) {
  for (const [plugin, config] of options.extensions) {
    context = plugin(context, config);
  }
}
```

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

### Integrate Franken UI with Tailwind CSS

Source: https://github.com/franken-ui/ui/blob/master/_autodocs/README.md

Configure your Tailwind CSS setup to include the Franken UI plugin. This allows for custom theming and preflight styles.

```typescript
import frankenUI from 'franken-ui';

export default {
  content: ['./src/**/*.html'],
  plugins: [
    frankenUI({
      preflight: true,
      layer: false,
      customPalette: { /* ... */ }
    })
  ]
};
```

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

### Configuration Options

Source: https://github.com/franken-ui/ui/blob/master/_autodocs/INDEX.md

Properties available for configuring the Franken UI plugin.

```APIDOC
## Configuration Options

### Options Object Properties

- `preflight?: boolean` - Include CSS reset
- `layer?: boolean` - Use @layer directives
- `layerExceptions?: string[]` - Components to exclude from layering
- `customPalette?: Palette` - Custom color themes
- `extensions?: Extensions` - Plugin extensions

### CSS Variable Categories

- Global variables (breakpoints, sizing, shadows, fonts)
- Color tokens (primary, secondary, destructive, etc.)
- Component-specific variables (per component)
```

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

### Define Custom Color Tokens in HSL

Source: https://github.com/franken-ui/ui/blob/master/_autodocs/configuration.md

Examples of color values in HSL format, which is used for all color tokens within `customPalette`. This format allows for precise color definition.

```typescript
'220 90% 50%'    // Hue 220°, Saturation 90%, Lightness 50%
'0 0% 100%'      // White (no saturation)
'240 10% 3.9%'   // Dark blue-gray
```

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

### Import shadcn/ui Components

Source: https://github.com/franken-ui/ui/blob/master/_autodocs/exports.md

Import pre-built component implementations for integration with shadcn/ui projects. Ensure your project is set up with shadcn/ui.

```typescript
import button from 'franken-ui/shadcn-ui/button';
```

```typescript
import form from 'franken-ui/shadcn-ui/form';
```

```typescript
import { Badge } from 'franken-ui/shadcn-ui/badge';
```

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

### Import All Franken UI Components

Source: https://github.com/franken-ui/ui/blob/master/_autodocs/components.md

All components are exported from the main entry point of the Franken UI library. Import them as needed for your application.

```typescript
import {
  accordion,
  alert,
  animation,
  avatar,
  badge,
  breadcrumb,
  button,
  card,
  cmd,
  comment,
  container,
  cover,
  customSelect,
  date,
  divider,
  dotnav,
  drop,
  form,
  icon,
  inputPin,
  inputRange,
  inputTag,
  keyval,
  label,
  leader,
  lightbox,
  link,
  list,
  media,
  modal,
  nav,
  notification,
  offcanvas,
  pagination,
  placeholder,
  position,
  print,
  progress,
  slider,
  sortable,
  spinner,
  stepper,
  sticky,
  svg,
  switcher,
  tab,
  table,
  tag,
  themeSwitcher,
  thumbnav,
  tooltip,
  transition,
  typography,
  utility
} from 'franken-ui';
```

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

### Components

Source: https://github.com/franken-ui/ui/blob/master/_autodocs/INDEX.md

A categorized list of all available UI components within Franken UI.

```APIDOC
## Components

### Layout (3)
container, cover, media

### Navigation (7)
breadcrumb, dotnav, nav, pagination, tab, thumbnav, switcher

### Forms (6)
form, custom-select, input-pin, input-range, input-tag, keyval

### Content (8)
badge, card, alert, comment, divider, icon, label, link

### Lists & Tables (2)
list, table

### Modal & Overlay (4)
modal, offcanvas, lightbox, drop

### Interactive (3)
accordion, button, cmd

### Utilities (13)
animation, placeholder, position, progress, slider, sortable, spinner, stepper, sticky, tooltip, transition, typography, utility

### Special (3)
avatar, date, theme-switcher

### Structural (3)
print, leader, svg
```

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

### Main Entry Point: Tailwind CSS Plugin Factory

Source: https://github.com/franken-ui/ui/blob/master/_autodocs/exports.md

Import and use the default export from the main 'franken-ui' entry point to integrate the Tailwind CSS plugin into your project. Configure options like preflight, layer, customPalette, and extensions as needed.

```typescript
import frankenUI from 'franken-ui';

export default {
  plugins: [
    frankenUI({
      preflight: true,
      layer: false,
      customPalette: { /* ... */ },
      extensions: [ /* ... */ ]
    })
  ]
};
```

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

### PostCSS Configuration Details

Source: https://github.com/franken-ui/ui/blob/master/_autodocs/api-reference/cli.md

Shows the structure for configuring PostCSS, including the processing of Tailwind CSS directives and the addition of vendor prefixes via Autoprefixer.

```javascript
{
  plugins: {
    tailwindcss: {},     // Process Tailwind directives
    autoprefixer: {}     // Add vendor prefixes
  }
}
```

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

### Applying a Different Theme

Source: https://github.com/franken-ui/ui/blob/master/_autodocs/api-reference/context.md

Illustrates how to apply a different color scheme to all components by adding a specific class to the body element. This is useful for switching between predefined themes like dark mode or specific color palettes.

```html
<body class="dark uk-theme-violet">
  <!-- All components use violet color scheme -->
</body>
```

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

### Import Main Entry Named Exports

Source: https://github.com/franken-ui/ui/blob/master/_autodocs/exports.md

Import the default plugin factory and pre-built theme variables from the main franken-ui entry point. Use 'frankenPlugin' for Tailwind CSS integration and 'variables' for theme customization.

```typescript
import frankenPlugin, { variables } from 'franken-ui';

// frankenPlugin: Tailwind CSS plugin factory
// variables: Pre-built theme color definitions
```

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

### Franken UI Package Version Information

Source: https://github.com/franken-ui/ui/blob/master/_autodocs/exports.md

Contains metadata about the Franken UI package, including its name, version, author, license, and repository links.

```json
{
  "name": "franken-ui",
  "version": "2.1.2-next.0",
  "author": "Reden <reden@franken-ui.dev>",
  "license": "MIT",
  "repository": "https://github.com/franken-ui/ui",
  "homepage": "https://www.franken-ui.dev"
}
```

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

### Import Custom Extensions

Source: https://github.com/franken-ui/ui/blob/master/_autodocs/exports.md

Import custom plugin extensions to extend Franken UI functionality. Ensure the extension name matches the available files in the `dist/extensions` directory.

```typescript
import myExtension from 'franken-ui/extensions/my-extension';
```

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

### Import PostCSS Configuration

Source: https://github.com/franken-ui/ui/blob/master/_autodocs/exports.md

Import the PostCSS configuration for CSS processing. Note that this is deprecated and the Vite plugin is recommended instead.

```typescript
const frankenPostCSS = require('franken-ui/postcss/config');
```

```typescript
// or
import frankenPostCSS from 'franken-ui/postcss/config.js';
```

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

### Package JSON Configuration

Source: https://github.com/franken-ui/ui/blob/master/_autodocs/exports.md

This JSON defines the package name, version, and module type for the Franken UI package.

```json
{
  "name": "franken-ui",
  "version": "2.1.2-next.0",
  "type": "module"
}
```

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

### Import Franken UI CSS

Source: https://github.com/franken-ui/ui/blob/master/_autodocs/api-reference/cli.md

To apply Franken UI's styles, import its main CSS file into your application's entry point.

```javascript
import 'franken-ui/css/franken-ui.css';
```

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

### Apply Custom Color Theme

Source: https://github.com/franken-ui/ui/blob/master/_autodocs/configuration.md

Demonstrates how to apply a custom color theme to the `body` element using the defined theme class. This allows for easy switching between different brand color schemes.

```html
<body class="uk-theme-brand">
  <!-- Uses custom brand colors -->
</body>

<body class="dark uk-theme-brand">
  <!-- Uses dark variant of brand colors -->
</body>
```

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

### Import JavaScript Utility

Source: https://github.com/franken-ui/ui/blob/master/_autodocs/exports.md

Import a specific function from a JavaScript module within franken-ui. Ensure the module path matches the package structure.

```typescript
import { someFunction } from 'franken-ui/js/some-module';
```

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

### Vite Plugin Entry Point for Standalone CSS

Source: https://github.com/franken-ui/ui/blob/master/_autodocs/exports.md

Import and use the Vite plugin factory from 'franken-ui/plugin-vite' to generate standalone CSS during your Vite build process. Configure options such as preflight and layer.

```typescript
import { defineConfig } from 'vite';
import frankenVitePlugin from 'franken-ui/plugin-vite';

export default defineConfig({
  plugins: [
    frankenVitePlugin({
      preflight: true,
      layer: true
    })
  ]
});
```

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

### CSS Custom Properties for Color

Source: https://github.com/franken-ui/ui/blob/master/_autodocs/INDEX.md

Demonstrates how to define and use CSS custom properties for colors using HSL format, including support for an alpha channel.

```css
--primary: 220 90% 50%;           /* Hue Saturation% Lightness% */
--primary: hsl(var(--primary));   /* Usage in CSS */
--primary: hsl(var(--primary) / 0.8);  /* With alpha */
```

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

### Extend Franken UI with Custom Plugins

Source: https://github.com/franken-ui/ui/blob/master/_autodocs/README.md

Customize styling context by creating and applying custom plugins to the Franken UI configuration. This allows modification of components, palettes, and other settings.

```typescript
const myExtension = (context, config) => {
  // Modify context.components, context.palettes, etc.
  return context;
};

frankenUI({
  extensions: [[myExtension, { /* config */ }]]
})
```

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

### Options Type Definition

Source: https://github.com/franken-ui/ui/blob/master/_autodocs/types.md

Defines the configuration options for the Franken UI plugin, including preflight, layering, and custom palettes.

```typescript
export type Options = {
  preflight?: boolean;
  layer?: boolean;
  layerExceptions?: string[];
  customPalette?: Palette;
  extensions?: Extensions;
};
```

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

### Grouped Buttons

Source: https://github.com/franken-ui/ui/blob/master/_autodocs/api-reference/component-button.md

Illustrates how to group multiple buttons together for related actions.

```html
<div class="uk-btn-group">
  <button class="uk-btn uk-btn-default">Left</button>
  <button class="uk-btn uk-btn-default">Center</button>
  <button class="uk-btn uk-btn-default">Right</button>
</div>
```

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

### Context Exports for Theming and Components

Source: https://github.com/franken-ui/ui/blob/master/_autodocs/INDEX.md

Exports from Franken UI's context, including theme definitions, base styles, palettes, components, and color variables.

```typescript
export const theme: { ':root': CSSRuleObject; '.dark': CSSRuleObject }
export const base: { [selector: string]: CSSRuleObject }
export function palettes(options?: Options): CSSRuleObject
export const components: Components
export const variables: { [theme: string]: Colors }
```

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

### Custom Theme Palette Definition

Source: https://github.com/franken-ui/ui/blob/master/_autodocs/types.md

Shows how to define custom themes by extending the Palette type with specific color tokens.

```typescript
const customThemes: Palette = {
  '.uk-theme-brand': {
    '--primary': '350 100% 50%',
    // ... all 17+ tokens
  },
  '.dark.uk-theme-brand': {
    '--primary': '350 100% 60%',
    // ... all 17+ tokens
  }
};
```

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

### Vite Flow Diagram

Source: https://github.com/franken-ui/ui/blob/master/_autodocs/README.md

Illustrates the data flow when integrating with Vite. Options are processed through context and merger, then converted to a CSS string for file output.

```text
Options → Context → Merger → postcss-js → CSS String → File Output
```

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

### Integrate Franken UI Vite Plugin

Source: https://github.com/franken-ui/ui/blob/master/_autodocs/README.md

Add the Franken UI Vite plugin to your Vite configuration for seamless integration within a Vite-powered SvelteKit project.

```typescript
import frankenVitePlugin from 'franken-ui/plugin-vite';

export default {
  plugins: [frankenVitePlugin({ preflight: true })]
};
```

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

### Sized Buttons

Source: https://github.com/franken-ui/ui/blob/master/_autodocs/api-reference/component-button.md

Illustrates how to apply different size modifiers to buttons for visual hierarchy.

```html
<button class="uk-btn uk-btn-primary uk-btn-xs">Extra Small</button>
<button class="uk-btn uk-btn-primary uk-btn-sm">Small</button>
<button class="uk-btn uk-btn-primary uk-btn-md">Medium (default)</button>
<button class="uk-btn uk-btn-primary uk-btn-lg">Large</button>
```

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

### Icon with Text Button

Source: https://github.com/franken-ui/ui/blob/master/_autodocs/api-reference/component-button.md

Demonstrates a button that includes both an icon and text for clarity.

```html
<button class="uk-btn uk-btn-primary">
  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
  </svg>
  <span>Add Item</span>
</button>
```

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

### Basic HTML Button with Franken UI Classes

Source: https://github.com/franken-ui/ui/blob/master/_autodocs/INDEX.md

Apply Franken UI classes to an HTML button to style it with primary and large variants.

```html
<button class="uk-btn uk-btn-primary uk-btn-lg">
  Click Me
</button>
```

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

### Files Included in Franken UI Package

Source: https://github.com/franken-ui/ui/blob/master/_autodocs/exports.md

Defines which files are published within the Franken UI npm package. The 'dist/' directory is included, while test files are excluded.

```json
{
  "files": [
    "dist",
    "!dist/**/*.test.*",
    "!dist/**/*.spec.*
  ]
}
```

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

### Define Custom Extension Function

Source: https://github.com/franken-ui/ui/blob/master/_autodocs/configuration.md

Illustrates the signature and basic implementation of a custom extension function. It receives context and configuration, returning a modified context.

```typescript
type Extension = (context: Context, config: ExtensionConfig) => Context;
```

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

### Define Custom Color Palette Structure

Source: https://github.com/franken-ui/ui/blob/master/_autodocs/configuration.md

Illustrates the structure for defining custom color themes. Each theme requires a unique class name (e.g., `.uk-theme-mycompany`) and must define all 17+ required color tokens in HSL format.

```typescript
customPalette: {
  '.uk-theme-mycompany': {
    '--background': '0 0% 100%',
    '--foreground': '240 10% 3.9%',
    '--primary': '350 100% 50%',
    '--primary-foreground': '0 0% 100%',
    '--secondary': '200 100% 50%',
    '--secondary-foreground': '0 0% 100%',
    '--muted': '240 4.8% 95.9%',
    '--muted-foreground': '240 3.8% 46.1%',
    '--accent': '240 4.8% 95.9%',
    '--accent-foreground': '240 5.9% 10%',
    '--destructive': '0 84.2% 60.2%',
    '--destructive-foreground': '0 0% 98%',
    '--card': '0 0% 100%',
    '--card-foreground': '240 10% 3.9%',
    '--popover': '0 0% 100%',
    '--popover-foreground': '240 10% 3.9%',
    '--border': '240 5.9% 90%',
    '--input': '240 5.9% 90%',
    '--ring': '240 5.9% 10%'
  },
  '.dark.uk-theme-mycompany': {
    '--background': '240 10% 3.9%',
    '--foreground': '0 0% 98%',
    // ... all other tokens for dark mode
  }
}
```

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

### Configure Franken UI Vite Plugin

Source: https://github.com/franken-ui/ui/blob/master/_autodocs/api-reference/vite-plugin.md

Use this snippet to integrate the Franken UI Vite plugin into your Vite configuration. Customize theme variables, preflight styles, and layering options as needed.

```typescript
import { defineConfig } from 'vite';
import frankenVitePlugin from 'franken-ui/plugin-vite';

export default defineConfig({
  plugins: [
    frankenVitePlugin({
      preflight: true,
      layer: true,
      customPalette: {
        '.uk-theme-custom': {
          '--primary': '240 5.9% 10%',
          '--primary-foreground': '0 0% 98%',
          // ... complete color set required
        }
      }
    })
  ]
});

```

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

### Basic Tailwind CSS Configuration

Source: https://github.com/franken-ui/ui/blob/master/_autodocs/configuration.md

Configure Tailwind CSS to include Franken UI. Ensure your content paths are correctly set.

```javascript
import frankenUI from 'franken-ui';

export default {
  content: [
    './src/**/*.{html,js,svelte,ts}'
  ],
  theme: {
    extend: {}
  },
  plugins: [
    frankenUI({
      preflight: true,
      layer: false
    })
  ]
};
```

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

### Main Plugin Exports

Source: https://github.com/franken-ui/ui/blob/master/_autodocs/INDEX.md

These are the primary functions exported by the Franken UI library for use as Tailwind CSS or Vite plugins, and utility functions.

```APIDOC
## Main Plugin Exports

### `frankenUI(options?: Options)`

Tailwind CSS plugin factory.

### `customPalettePlugin(options?: Options)`

Vite plugin factory.

### `palette(variables)`

HSL-to-hex converter with SVG generation.

### `merger(options)`

CSS rule merger.
```

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

### Icon Button

Source: https://github.com/franken-ui/ui/blob/master/_autodocs/api-reference/component-button.md

Shows how to create a button that contains only an icon.

```html
<button class="uk-btn uk-btn-icon uk-btn-primary">
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
    <path d="M12 5v14M5 12h14"/>
  </svg>
</button>
```

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

### Merger Usage in Vite Plugin

Source: https://github.com/franken-ui/ui/blob/master/_autodocs/api-reference/merger.md

Illustrates the usage of the merger utility in a Vite plugin, showing the conversion of merged rules to a CSS string.

```typescript
// In Vite plugin
const rules = merger({
  palettes: context.palettes,
  components: context.components,
  pluginOptions: options
});

// Convert to CSS string and write to file
const cssString = css(rules);
```

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

### CSS Custom Properties for Component Variables

Source: https://github.com/franken-ui/ui/blob/master/_autodocs/INDEX.md

Shows how to customize component properties like height, padding, and radius using CSS custom properties within the :root scope.

```css
:root {
  --uk-btn-height: 3rem;
  --uk-btn-padding: 0.75rem 1.5rem;
  --uk-btn-radius: 0.375rem;
}
```