Components

@knitui/components ships 105 components. Every tile below is the real component, mounted live — the same story file its own page, the kit's Storybook and the iOS/Android gallery render.

One import, and each of them runs as a native view on iOS and Android and as real DOM on the web:

import { Button, Card, Select, Table } from "@knitui/components";

Data Display 7

List

List is a vertical list composed from `List` + `List.Item`.

Marquee

Marquee continuously scrolls its children in a seamless loop.

Table

Table is a compound component that renders structured data.

ThemeIcon

ThemeIcon is the canonical icon chip — a themed square that holds an icon.

Tree

Tree renders a hierarchical, expandable node list.

TreeSelect

TreeSelect renders a hierarchical tree of nodes inside a `Combobox` dropdown.

VirtualList

VirtualList is a fast, windowed, variable-height list that renders only the rows near the viewport (plus a render-ahead buffer).

Display 15

Avatar

Avatar is a circular display element built from `Box` + `Text`.

BackgroundImage

`BackgroundImage` renders content over a cover-positioned image.

Badge

Badge is a compact status label composed from `Box` + `Text`.

Card

Card is a surface container composed with `Card.Header`, `Card.Footer`, and full-bleed `Card.Section` sub-components.

ColorSwatch

ColorSwatch displays a solid color circle or square.

Image

Cross-platform `Image` backed by [expo-image](https://docs.expo.dev/versions/latest/sdk/image/) on web, iOS, and Android.

Indicator

Indicator overlays a small dot or label badge on a corner/edge of its children.

Loader

Loader is a multi-type loading indicator (`oval` | `dots` | `bars`).

Overlay

Overlay is a full-cover scrim — an absolutely- (or fixed-) positioned element that fills its parent with a translucent wash.

Pill

Pill is a small rounded label, optionally with a remove button.

RollingNumber

An animated number whose digits roll between values.

Separator

Separator renders a divider line — mirrors Mantine's `Divider`.

Skeleton

Skeleton renders an animated placeholder while content is loading.

VisuallyHidden

`VisuallyHidden` renders content that is invisible on screen but remains fully available to assistive technology (screen readers, VoiceOver, TalkBack).

Feedback 4

Alert

Alert is a feedback panel composed from `Box` + `Text`.

LoadingOverlay

LoadingOverlay covers its parent container with a centered `Loader` over a translucent scrim.

Spoiler

Spoiler collapses content taller than `maxHeight` and renders a toggle control to reveal or hide the overflow.

Inputs 33

ActionIcon

ActionIcon is a square, icon-only button — the closest sibling to `Button`.

AngleSlider

AngleSlider lets users pick an angle (0–359°) by dragging around a circular ring or using arrow keys.

Autocomplete

Free-text input with a suggestion dropdown.

Checkbox

Checkbox is a cross-platform toggle control.

Chip

Chip is a pill-shaped toggle that functions as a checkbox or radio button.

CloseButton

CloseButton mirrors Mantine's `CloseButton`, built on `ActionIcon`.

ColorInput

ColorInput combines an `InputBase` with a `Popover`-hosted `ColorPicker` dropdown.

ColorPicker

ColorPicker provides a draggable saturation area, a hue slider (and optional alpha slider for alpha formats), and an optional predefined swatch grid.

Combobox

Combobox is a compound component that wires a trigger target to a floating dropdown of selectable options.

CopyButton

`CopyButton` is a renderless copy-to-clipboard controller.

Fieldset

Fieldset groups related form controls under an optional `legend`.

FileButton

FileButton opens the native file picker from any trigger you render.

FileInput

FileInput opens the native file picker and displays the picked file name(s).

InputBase

InputBase composes `Input` + `Input.Wrapper` into a single component.

MaskInput

MaskInput formats user input against a `mask` pattern as the user types.

MultiSelect

MultiSelect renders selected values as removable pills inside a `PillsInput`, backed by a `Combobox` dropdown.

NativeSelect

NativeSelect renders a real `<select>` element wrapped in the shared input chrome.

NumberInput

NumberInput is a numeric text field built on `InputBase` with built-in increment/decrement controls and keyboard stepping.

PasswordInput

PasswordInput is a masked text field built on `InputBase`.

PillsInput

PillsInput is a multiline input shell that hosts a `Pill.Group` of pills alongside an editable `PillsInput.Field`.

PinInput

PinInput renders a row of single-character inputs for codes and OTP entry.

Rating

Rating renders `count` star symbols that support hover preview, fractional selection, read-only display and clearable interaction.

SegmentedControl

SegmentedControl is a single-select row (or column) of mutually-exclusive options.

Select

Select is a single-value dropdown built on `Combobox` + `InputBase`.

Slider

Slider captures a single numeric value within a range by dragging a thumb.

Switch

Switch is a toggle control built on a styled `Box` track and thumb.

TagsInput

Free-text tags input built on `Combobox` + `PillsInput`.

TextInput

TextInput is a labeled single-line text field built on `InputBase` (`Input.Wrapper` + `Input`).

Textarea

Textarea is a multiline text field built on top of `InputBase`.

UnstyledButton is an accessible pressable base with no visual styling beyond a reset (transparent background, no border) plus interaction affordances (`role="button"`, pointer cursor, `focusVisible` outline, a `disabled` variant).

Layout 14

Affix

`Affix` pins its children to a fixed position on the viewport (or nearest filling ancestor on React Native).

AspectRatio

AspectRatio constrains its content to a fixed width-to-height ratio.

Box

`Box` is the single base primitive the component kit composes from.

Center

Center aligns its children on both the horizontal and vertical axes.

Container

Container is a centered, max-width content wrapper that mirrors Mantine's `Container`.

Flex

Flex is a flexbox layout primitive that mirrors Mantine's `Flex`.

Grid

Grid is a 12-column flex-wrap grid that mirrors Mantine's `Grid` + `Grid.Col`.

Group

Group is a horizontal flex container that mirrors Mantine's `Group`.

KeyboardAvoidingView

`KeyboardAvoidingView` is a cross-platform form primitive.

KeyboardAwareScrollView

`KeyboardAwareScrollView` is a cross-platform form primitive.

Paper

Paper is a generic content surface built on `Box`.

SimpleGrid

SimpleGrid renders equal-width columns using a flex-wrap row layout.

Spacer

Spacer is a fixed-size invisible element that reserves space between other elements.

Stack

Stack is a vertical flex column built on `Box`.

Accordion

Accordion shows collapsible content panels.

Breadcrumbs

Breadcrumbs renders a row of navigational crumbs separated by a `separator`.

Burger

Burger renders a three-line hamburger icon that animates to an × when `opened` is true.

NavLink

NavLink renders a pressable navigation item with optional label, description, left/right sections, and nestable children.

Pagination

Pagination renders a row of page controls built from `Pagination.Root` + `Pagination.Items` + step/edge controls.

ScrollArea

ScrollArea is a scrollable viewport with **custom overlay scrollbars** that render and behave identically on web and React Native — the browser-native scrollbar is hidden and replaced by draggable thumbs we draw ourselves, so they are fully themeable.

Stepper

Stepper guides users through a multi-step flow.

Tabs

Tabs organises content into labelled panels.

Overlays 12

Collapse

Collapse animates a content region between a zero-size collapsed state and its natural expanded size.

Dialog

Dialog is a floating corner panel pinned to a viewport edge via `Affix` — no overlay scrim.

Drawer

Drawer slides a panel in from any viewport edge.

FocusTrap

`FocusTrap` is a purely behavioural component — it clones its single child and attaches a focus-trap ref so that keyboard focus stays within the wrapped region while `active` is `true`.

HoverCard

HoverCard is a compound overlay that opens a floating dropdown when the pointer enters `HoverCard.Target`.

Modal

Modal is an overlay dialog composed of `Modal.Content`, `Modal.Header`, `Modal.Title`, `Modal.Body`, and `Modal.CloseButton`.

Motion

Configurable, preset-driven animation.

Popover

Popover is a floating overlay anchored to a trigger element.

Portal

Portal (built on `react-native-teleport`) moves its `children` to a different place in the view hierarchy so overlays (popovers, dropdowns, modals) escape `overflow: hidden` and stacking-context ancestors.

Tooltip

Tooltip wraps a single target element and renders a floating label on hover (or focus/touch when enabled).

Transition

Transition drives single-child mount/unmount animations via a render prop.

size — xxs through xxl, resolved from one metrics table, so a md Button and a md Select line up.
variant — how the active theme colour ramp is applied: filled, light, outline, subtle, default, white, transparent, gradient.
styles — per-slot overrides for a component's internal parts. See Slots & styles.

Data Display 7

Display 15

Feedback 4

Inputs 33

Layout 14

Navigation 9

Overlays 12

Typography 11