fio-kit

v1.6.5

Published

10 days ago

A hand-drawn web UI kit built with Web Components

Downloads

368

0High
0Medium
0Low

fionoble

web-components ui-kit hand-drawn design-system custom-elements

Fio Kit - Hand-Drawn Web UI Kit

A comprehensive, framework-agnostic web UI kit with a unique hand-drawn aesthetic, built using Web Components with Preact.

Features

Framework Agnostic: Built with Web Components, works with any framework or vanilla HTML
Hand-Drawn Aesthetic: Organic, sketchy borders and animations that mimic hand-drawn illustrations
Accessible: ARIA attributes and keyboard navigation support
Customizable: CSS custom properties for easy theming
Well Documented: Comprehensive Storybook documentation with interactive examples
TypeScript Support: Full TypeScript definitions included

Installation

# Using pnpm (recommended)
pnpm install fio-kit

# Using npm
npm install fio-kit

# Using yarn
yarn add fio-kit

Note: Preact is a peer dependency. Install it if not already present:

pnpm install preact

Quick Start

HTML Usage

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="node_modules/fio-kit/dist/style.css">
  <script type="module" src="node_modules/fio-kit/dist/fio-kit.es.js"></script>
</head>
<body>
  <fio-button variant="primary">Click Me!</fio-button>
  
  <fio-input 
    label="Email" 
    type="email" 
    placeholder="Enter your email"
  ></fio-input>
  
  <fio-card clickable>
    <div slot="content">
      <h3>Card Title</h3>
      <p>Card content goes here</p>
    </div>
  </fio-card>
</body>
</html>

JavaScript Import

import 'fio-kit';

// Components are auto-registered and ready to use

Components (26 Total)

Form Elements

| Component | Tag | Description | |-----------|-----|-------------| | Button | <fio-button> | Versatile button with multiple variants and states | | Input | <fio-input> | Text input field with validation and helper text | | Textarea | <fio-textarea> | Multi-line text input with character count | | Select | <fio-select> | Dropdown select with keyboard navigation | | Checkbox | <fio-checkbox> | Checkbox with indeterminate state support | | Radio | <fio-radio> | Radio button for single selection | | Switch | <fio-switch> | Toggle switch for boolean values | | Slider | <fio-slider> | Range slider with tick marks |

Layout & Containers

| Component | Tag | Description | |-----------|-----|-------------| | Card | <fio-card> | Content container with header, content, and footer slots | | Box | <fio-box> | Flexible box layout utility | | Grid | <fio-grid> | CSS Grid layout wrapper | | Paper | <fio-paper> | Paper-like background (notebook, aged, yellow) | | Blog Container | <fio-blog-container> | Typography-optimized content container |

Navigation

| Component | Tag | Description | |-----------|-----|-------------| | Tabs | <fio-tabs> | Tabbed navigation with panels | | Menu | <fio-menu> | Dropdown menu with keyboard navigation | | Navigation | <fio-navigation> | Navigation bar component | | Link | <fio-link> | Styled anchor with external link handling |

Feedback & Overlays

| Component | Tag | Description | |-----------|-----|-------------| | Modal | <fio-modal> | Dialog with focus trapping and backdrop | | Toast | FioToast.success() | Toast notifications (programmatic API) | | Tooltip | <fio-tooltip> | Contextual tooltip on hover/focus | | Popover | <fio-popover> | Rich popover with positioning | | Progress | <fio-progress> | Progress bar (linear, circular, steps) |

Data Display

| Component | Tag | Description | |-----------|-----|-------------| | Table | <fio-table> | Data table with sorting and row actions | | Analytics | <fio-analytics> | Hand-drawn charts (line, bar, pie, donut, area) |

Decorative

| Component | Tag | Description | |-----------|-----|-------------| | Polaroid | <fio-polaroid> | Polaroid-style image frame | | Sticky Note | <fio-sticky-note> | Editable sticky note |

Usage Examples

Modal with Imperative API

const modal = document.querySelector('fio-modal');
modal.show();   // Open modal
modal.close();  // Close modal
modal.toggle(); // Toggle state

Toast Notifications

import { FioToast } from 'fio-kit';

FioToast.success('Operation completed!');
FioToast.error('Something went wrong');
FioToast.warning('Please review your input');
FioToast.info('New updates available');

Form Components

<fio-input 
  label="Username" 
  name="username"
  required
  pattern="[a-zA-Z0-9]+"
  helper="Letters and numbers only"
></fio-input>

<fio-select 
  label="Country"
  name="country"
  options='[{"value":"us","label":"United States"},{"value":"uk","label":"United Kingdom"}]'
></fio-select>

<fio-checkbox label="Accept terms" required></fio-checkbox>

Development

Setup

# Install dependencies
pnpm install

# Start development server
pnpm run dev

# Start Storybook
pnpm run storybook

Building

# Build the library
pnpm run build

# Run tests
pnpm run test

# Build Storybook documentation
pnpm run build-storybook

Theming

Customize the appearance using CSS custom properties:

:root {
  /* Colors */
  --fio-color-primary: #ea580c;
  --fio-color-secondary: #E84855;
  --fio-color-accent: #F9DC5C;
  --fio-color-success: #95C93D;
  --fio-color-warning: #FFB847;
  --fio-color-error: #E84855;
  --fio-color-info: #4ECDC4;
  
  /* Typography */
  --fio-font-family-primary: 'Kalam', cursive;
  --fio-font-family-secondary: 'Patrick Hand', cursive;
  --fio-font-size-base: 1rem;
  
  /* Spacing */
  --fio-spacing-4: 1rem;
  
  /* Effects */
  --fio-shadow-base: 3px 3px 6px rgba(0, 0, 0, 0.1);
}

Browser Support

Chrome/Edge (latest)
Firefox (latest)
Safari (latest)
Mobile browsers (iOS Safari, Chrome Android)

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT