Kibo UI Documentation

The Reel component is a composable, Instagram-style component designed for vertical content (9:16 aspect ratio). It supports both video and image content and includes features such as:

• Progress Indicators: Shows current and total reels.
• Automatic Playback: Seamless transitions and auto-advance to the next reel.
• Navigation: Supports touch-friendly tapping (left/right sides) and keyboard accessibility.
• Customization: Composable architecture allows for custom overlays, headers, and footers for metadata, social interactions, and controls (play/pause, mute/unmute).

The Tree component is a composable component designed for displaying hierarchical data structures. Key features include:

• Animated expand/collapse: Configurable animations for opening and closing nodes.
• Customizable nodes: Support for custom icons and labels via a composable API.
• Selection modes: Supports both single and multi-selection.
• Visual hierarchy: Optional tree lines to visually connect parent and child nodes.
• Keyboard navigation: Supports keyboard interaction, including Ctrl/Cmd for multi-select.
• Built-in icons: Includes default folder/file icons with open/closed states.

Kibo UI is a custom registry of composable, accessible, and open-source components designed to work with shadcn/ui.

Key characteristics:

• shadcn/ui Integration: Uses existing shadcn/ui CSS variables and is designed to work with its primitives.
• Composable Building Blocks: Components are designed to reduce boilerplate while maintaining flexibility and responsive design.
• Complex Logic: Unlike core shadcn/ui which primarily wraps Radix UI primitives, Kibo UI wraps more complex logic from various headless libraries to provide components suitable for building comprehensive applications.

The Color Picker is a Figma-inspired component that allows users to select colors with high precision. Key capabilities include:

• Interactive Selection: Drag and drop functionality for color selection.
• Precise Adjustments: Dedicated sliders for Hue and Alpha (transparency).
• EyeDropper Tool: Ability to pick colors from anywhere on the screen.
• Multiple Formats: Outputs color in HEX, RGB, CSS, and HSL formats.
• Real-time Preview: Instant visual feedback of the selected color.
• Customization: Fully stylable via className and component props.

The Editor component is a rich text editor built on top of TipTap. It supports a wide range of text manipulation and formatting features, including:

• Formatting: Bold, italic, underline, strikethrough, code, superscript, subscript, text/background colors, and links.
• Menus: Slash commands, floating menus, and bubble menus for text selection.
• Structure: Headings (H1, H2, H3), lists (bullet, ordered, task), blockquotes, and horizontal rules.
• Tables: Full table management including column/row management and merging/splitting cells.
• Advanced Content: Code blocks with syntax highlighting and placeholder text.
• Utilities: Character and word count, clear formatting, and character limit support.

The Image Crop component provides an interactive interface for cropping images. Key features include:

• Aspect Ratios: Support for custom aspect ratios or free-form cropping.
• Circular Mode: A dedicated mode for circular cropping, ideal for profile pictures and avatars.
• Output: Returns the cropped image as a PNG data URL, making it ready for immediate upload or display.
• Styling: Uses shadcn/ui variables for consistent styling and includes a checkered background pattern to preview transparency.
• Optimization: Includes automatic image scaling and compression based on maximum file size.

The Gantt chart component provides the following capabilities for visualizing project schedules:

• Timeline Interaction: Resizable and draggable timeline items.
• Markers: Support for markers to highlight important dates, a 'today' marker for the current date, and a 'create marker' trigger.
• Organization: Grouping of features and support for multiple items per row (useful for resource booking or hotel reservations).
• Layout Variations: Support for layouts without a sidebar and read-only modes.

The Rating component is a star rating component that supports keyboard navigation, hover effects, and accessible ARIA attributes. It can be customized for colors, size, and icons, and supports both read-only modes and hidden input support for forms.

Key Features:

• Customizable number of stars and size
• Support for keyboard navigation
• Hover and focus states
• Accessible ARIA attributes
• Read-only mode
• Hidden input support for forms

The Combobox is an autocomplete input and command palette that provides a list of suggestions. It supports several modes and features:

• Controlled and Uncontrolled modes: Manage the selected value via state or let the component handle it internally.
• Customizable Trigger: You can customize the button that opens the dropdown.
• Search & Navigation: Includes built-in search functionality and full keyboard navigation support.
• Layout Features: Supports responsive width (matching the trigger), fixed width, and grouping of items.
• Advanced Capabilities: Handles empty states, context-based type labeling, and native "create new" functionality for adding items that don't exist in the list.

The Pill component is a flexible badge-like component that supports several specialized layouts and indicators:

• Avatar: Display a pill with an avatar and text.
• Status: Use status indicators with variants (success, error, warning, info) and pulse animations.
• Button: Integrate a dismissal button within the pill.
• Indicator: Show different indicator states.
• Delta: Display change indicators (increase/decrease).
• Icon: Include icons with consistent styling.
• Avatar Group: Display multiple avatars with an overlapping effect.