# Kara UI

> Real SwiftUI and Jetpack Compose views for React Native, styled through one token-typed sx surface — in the platform’s colours by default, and yours through the theme.

Package: @hzblj/kara-ui (Expo SDK 57, iOS and Android, development build). Router pieces: @hzblj/kara-ui/router.

## Guides

- [Changelog](https://www.kara.janblazej.dev/docs/changelog): What changed in each release of kara.
- [Components](https://www.kara.janblazej.dev/docs/components): Every component, photographed on iOS and Android, in light and dark.
- [Haptics](https://www.kara.janblazej.dev/docs/haptics): The platform’s own haptic feedback, named for what happened.
- [Screen and Island](https://www.kara.janblazej.dev/docs/hosts): Native views render in a Screen or an Island; the React Native tier renders anywhere.
- [Icons](https://www.kara.janblazej.dev/docs/icons): Your own SVGs, turned into native icons on both platforms at prebuild.
- [Installation](https://www.kara.janblazej.dev/docs/installation): Install kara and its peers, add the config plugin and mount the provider.
- [Introduction](https://www.kara.janblazej.dev/docs): A native-first design system for Expo: real SwiftUI and Jetpack Compose views, one token-typed sx.
- [Expo Router](https://www.kara.janblazej.dev/docs/router): Native tabs, the navigation theme and the zoom transition, from @hzblj/kara-ui/router.
- [Styling with sx](https://www.kara.janblazej.dev/docs/styling): One token-typed sx surface for SwiftUI modifiers, Compose modifiers and React Native styles.
- [Theming](https://www.kara.janblazej.dev/docs/theming): Colours, typefaces, the Android seed and Material You — overrides of values, never of names.
- [Design tokens](https://www.kara.janblazej.dev/docs/tokens): Every colour, spacing, radius and text style kara resolves, read from the library itself.

## Actions

- [Button](https://www.kara.janblazej.dev/docs/components/button): The platform’s own button, in four variants: accent, secondary, destructive and glass.
- [IconButton](https://www.kara.janblazej.dev/docs/components/icon-button): A button that is just an icon, for toolbars and compact rows.
- [Fab](https://www.kara.janblazej.dev/docs/components/fab): The screen’s primary action, floating above the content.
- [FabMenu](https://www.kara.janblazej.dev/docs/components/fab-menu): A floating button that opens a few related actions.
- [Link](https://www.kara.janblazej.dev/docs/components/link): Text that opens a URL.
- [Menu](https://www.kara.janblazej.dev/docs/components/menu): A list of actions that drops down from a label.
- [ActionSheet](https://www.kara.janblazej.dev/docs/components/action-sheet): Actions that slide up from the bottom of the screen.
- [ContextMenu](https://www.kara.janblazej.dev/docs/components/context-menu): A long-press menu on any React Native content, with a custom preview on iOS.
- [SwipeActions](https://www.kara.janblazej.dev/docs/components/swipe-actions): Buttons revealed by swiping a list row.
- [Pressable](https://www.kara.janblazej.dev/docs/components/pressable): Makes any React Native content tappable, with press feedback built in.

## Selection and input

- [Switch](https://www.kara.janblazej.dev/docs/components/switch): An on/off setting, tinted with your accent.
- [Checkbox](https://www.kara.janblazej.dev/docs/components/checkbox): A yes/no choice, usually one of several in a form.
- [RadioGroup](https://www.kara.janblazej.dev/docs/components/radio-group): One choice out of a few, all visible at once.
- [Slider](https://www.kara.janblazej.dev/docs/components/slider): A value along a range, picked by dragging.
- [Stepper](https://www.kara.janblazej.dev/docs/components/stepper): A number nudged up and down.
- [SegmentedControl](https://www.kara.janblazej.dev/docs/components/segmented-control): Switches between a few views of the same thing.
- [Picker](https://www.kara.janblazej.dev/docs/components/picker): One choice out of a longer list.
- [DatePicker](https://www.kara.janblazej.dev/docs/components/date-picker): A date, picked from the platform’s own calendar.
- [ColorPicker](https://www.kara.janblazej.dev/docs/components/color-picker): The system colour picker.
- [TextField](https://www.kara.janblazej.dev/docs/components/text-field): Text input with a label, for secure entry and errors too.
- [SearchBar](https://www.kara.janblazej.dev/docs/components/search-bar): A search field with the platform’s look.
- [Chip](https://www.kara.janblazej.dev/docs/components/chip): Compact toggles for filters and tags.

## Content

- [Text](https://www.kara.janblazej.dev/docs/components/text): Text in the type scale, coloured by token.
- [Label](https://www.kara.janblazej.dev/docs/components/label): An icon and a short text, aligned.
- [LabeledContent](https://www.kara.janblazej.dev/docs/components/labeled-content): A label with a value or a control beside it.
- [Badge](https://www.kara.janblazej.dev/docs/components/badge): A small status label.
- [Avatar](https://www.kara.janblazej.dev/docs/components/avatar): A person’s initials or photo in a circle.
- [Icon](https://www.kara.janblazej.dev/docs/components/icon): Your own SVG icons, drawn natively in both tiers.
- [Image](https://www.kara.janblazej.dev/docs/components/image): A remote or local image that fades in.
- [Card](https://www.kara.janblazej.dev/docs/components/card): A raised container for one piece of content.
- [Surface](https://www.kara.janblazej.dev/docs/components/surface): A coloured, rounded background — plain or glass.
- [GlassView](https://www.kara.janblazej.dev/docs/components/glass-view): Liquid Glass around any React Native content.
- [EmptyState](https://www.kara.janblazej.dev/docs/components/empty-state): What to show when there is nothing to show.

## Layout and lists

- [Stacks](https://www.kara.janblazej.dev/docs/components/stacks): VStack, HStack and ZStack lay native views out in a column, a row or layers.
- [Island](https://www.kara.janblazej.dev/docs/components/island): Where native views meet React Native layout.
- [Screen](https://www.kara.janblazej.dev/docs/components/screen): A whole screen of native views.
- [List](https://www.kara.janblazej.dev/docs/components/list): A native scrolling list of rows.
- [ListItem](https://www.kara.janblazej.dev/docs/components/list-item): A row with an icon, a title, a subtitle and a chevron.
- [Form](https://www.kara.janblazej.dev/docs/components/form): Grouped sections of settings and fields.
- [Collapsible](https://www.kara.janblazej.dev/docs/components/collapsible): Content that expands under its label.
- [Pager](https://www.kara.janblazej.dev/docs/components/pager): Swipeable pages that snap into place.
- [ScrollEdgeContainer](https://www.kara.janblazej.dev/docs/components/scroll-edge-container): Bars over a scroll view, with the iOS 26 scroll edge effect under them.

## Feedback

- [Progress](https://www.kara.janblazej.dev/docs/components/progress): How far along something is — or that it is still going.
- [ActivityIndicator](https://www.kara.janblazej.dev/docs/components/activity-indicator): A small spinner, for the React Native tier.
- [Skeleton](https://www.kara.janblazej.dev/docs/components/skeleton): Pulsing placeholders for content on its way.
- [Snackbar](https://www.kara.janblazej.dev/docs/components/snackbar): A brief message at the bottom of the screen.
- [Alert](https://www.kara.janblazej.dev/docs/components/alert): A question that needs an answer before going on.
- [Tooltip](https://www.kara.janblazej.dev/docs/components/tooltip): A short hint pointing at what it explains.
- [RnTooltip](https://www.kara.janblazej.dev/docs/components/rn-tooltip): A rich tooltip with a title and actions, for React Native content.

## Navigation and sheets

- [Sheet](https://www.kara.janblazej.dev/docs/components/sheet): A native sheet with a native header: titles, back, close and actions, detents and a large title.
- [NavigationBar](https://www.kara.janblazej.dev/docs/components/navigation-bar): A title with items on either side — a real navigation bar outside a navigation stack.
- [Tabs](https://www.kara.janblazej.dev/docs/components/tabs): Native tabs for Expo Router.
- [ZoomTransition](https://www.kara.janblazej.dev/docs/components/zoom-transition): A push that grows out of the view it was opened from, and shrinks back into it.

## React Native tier

- [Box](https://www.kara.janblazej.dev/docs/components/box): A styled React Native view.
- [RnText](https://www.kara.janblazej.dev/docs/components/rn-text): React Native text in the type scale.
- [RnScrollView](https://www.kara.janblazej.dev/docs/components/rn-scroll-view): A React Native scroll view with the `sx` props.
- [RnFlatList](https://www.kara.janblazej.dev/docs/components/rn-flat-list): React Native lists for rows that host native views.
- [ScrollView](https://www.kara.janblazej.dev/docs/components/scroll-view): A native scroll view.

## Optional

- [llms-full.txt](https://www.kara.janblazej.dev/llms-full.txt): every component's import, usage, props and platform notes in one file
- [Repository](https://github.com/hzblj/kara-ui): source, example app, issues