---
name: "@tetra-ui"
slug: "tetra-ui"
description: "Delightful components for a clean, accessible and modern component library for React Native."
category: "Forms"
tags: ["accessibility", "auth", "buttons", "cards", "design-system", "forms", "icons", "loaders", "mobile", "navigation", "overlays"]
framework: "react"
license: "MIT"
author: "Liamandrew"
website: "https://tetra-ui.com"
github: "https://github.com/Liamandrew/tetra-ui"
registry: "https://tetra-ui.com/r/registry.json"
pro: false
pro_url: null
github_stars: 4
component_count: 36
generated_at: "2026-07-28T08:59:05.895Z"
---

# @tetra-ui

Delightful components for a clean, accessible and modern component library for React Native.

## Links

- Website: https://tetra-ui.com
- GitHub: https://github.com/Liamandrew/tetra-ui
- Registry JSON: https://tetra-ui.com/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/tetra-ui
- This file: https://sh4dcn.vercel.app/md/tetra-ui.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://tetra-ui.com/r/registry.json
pnpm dlx shadcn@latest add https://tetra-ui.com/r/registry.json
bunx shadcn@latest add https://tetra-ui.com/r/registry.json
# clone the source repo
git clone https://github.com/Liamandrew/tetra-ui.git
# fetch the raw registry index
curl -s https://tetra-ui.com/r/registry.json
```

## Components (36)

| name | type | description | install |
| --- | --- | --- | --- |
| accordion | registry:ui | A vertically stacked set of interactive headings that reveal associated content sections. | `npx shadcn@latest add https://tetra-ui.com/r/accordion.json` |
| action-input | registry:ui | A component that allows a user to trigger an action and displays a value attached to the action. | `npx shadcn@latest add https://tetra-ui.com/r/action-input.json` |
| badge | registry:ui | Displays a badge. | `npx shadcn@latest add https://tetra-ui.com/r/badge.json` |
| button | registry:ui | A component to display a button and allows a user to trigger an action. | `npx shadcn@latest add https://tetra-ui.com/r/button.json` |
| card | registry:ui | Displays a card with a header, content, and footer. | `npx shadcn@latest add https://tetra-ui.com/r/card.json` |
| checkbox | registry:ui | A control that allows users to toggle between checked and unchecked states. | `npx shadcn@latest add https://tetra-ui.com/r/checkbox.json` |
| choicebox | registry:ui | A group of selectable cards for single or multiple choice. | `npx shadcn@latest add https://tetra-ui.com/r/choicebox.json` |
| chip | registry:ui | Displays a compact, rounded chip element. | `npx shadcn@latest add https://tetra-ui.com/r/chip.json` |
| empty | registry:ui | Displays an empty state. | `npx shadcn@latest add https://tetra-ui.com/r/empty.json` |
| form | registry:ui | Components and utilities that help you compose forms with react-hook-form. | `npx shadcn@latest add https://tetra-ui.com/r/form.json` |
| heading | registry:ui | A component to display headings. | `npx shadcn@latest add https://tetra-ui.com/r/heading.json` |
| icons | registry:ui | Icon components styled with Tailwind classes for React Native. | `npx shadcn@latest add https://tetra-ui.com/r/icons.json` |
| inline-list | registry:ui | A grouped list section for settings-style rows with flexible leading and trailing addons. | `npx shadcn@latest add https://tetra-ui.com/r/inline-list.json` |
| input | registry:ui | A core component that allows users to enter text. | `npx shadcn@latest add https://tetra-ui.com/r/input.json` |
| label | registry:ui | A label component used to accompany form inputs. | `npx shadcn@latest add https://tetra-ui.com/r/label.json` |
| menu | registry:ui | A composable native menu built on Expo UI, with support for groups, separators, and nested submenus. | `npx shadcn@latest add https://tetra-ui.com/r/menu.json` |
| bottom-sheet | registry:ui | Interactive bottom sheet built on Expo UI with native snap points, gestures, and keyboard support. | `npx shadcn@latest add https://tetra-ui.com/r/bottom-sheet.json` |
| native-sheet | registry:ui | A sheet component that can be used to display content in a modal. | `npx shadcn@latest add https://tetra-ui.com/r/native-sheet.json` |
| otp-input | registry:ui | A component for entering one-time passwords with individual character slots. | `npx shadcn@latest add https://tetra-ui.com/r/otp-input.json` |
| password-input | registry:ui | An input component that allows users to enter a password. | `npx shadcn@latest add https://tetra-ui.com/r/password-input.json` |
| popover | registry:ui | Displays content in a portal relative to the triggering button element. | `npx shadcn@latest add https://tetra-ui.com/r/popover.json` |
| progress | registry:ui | Displays an indicator showing the completion progress of a task. | `npx shadcn@latest add https://tetra-ui.com/r/progress.json` |
| radio | registry:ui | A control that indicates a selected option within a group. | `npx shadcn@latest add https://tetra-ui.com/r/radio.json` |
| portal | registry:ui | Renders children into a different part of the app. | `npx shadcn@latest add https://tetra-ui.com/r/portal.json` |
| search-input | registry:ui | An input component that allows users to search for content. | `npx shadcn@latest add https://tetra-ui.com/r/search-input.json` |
| select | registry:ui | A component that allows users to select a value from a list of options. | `npx shadcn@latest add https://tetra-ui.com/r/select.json` |
| separator | registry:ui | Divides content with a horizontal or vertical line. | `npx shadcn@latest add https://tetra-ui.com/r/separator.json` |
| skeleton | registry:ui | A component to display placeholder content while in a loading state. | `npx shadcn@latest add https://tetra-ui.com/r/skeleton.json` |
| slider | registry:ui | A control for selecting a value from a continuous or stepped range. | `npx shadcn@latest add https://tetra-ui.com/r/slider.json` |
| slot | registry:ui | A utility component that allows merging props onto an optional child component. | `npx shadcn@latest add https://tetra-ui.com/r/slot.json` |
| stack | registry:ui | A layout component that stacks children horizontally or vertically with consistent spacing. | `npx shadcn@latest add https://tetra-ui.com/r/stack.json` |
| switch | registry:ui | A control that allows users to toggle between checked and unchecked states. | `npx shadcn@latest add https://tetra-ui.com/r/switch.json` |
| text | registry:ui | A lightweight wrapper around the React Native Text component to provide default styles. | `npx shadcn@latest add https://tetra-ui.com/r/text.json` |
| text-input | registry:ui | A component that allows users to enter text. | `npx shadcn@latest add https://tetra-ui.com/r/text-input.json` |
| textarea-input | registry:ui | A component that allows users to enter larger text. | `npx shadcn@latest add https://tetra-ui.com/r/textarea-input.json` |
| toast | registry:ui | An opinionated toast component for React Native. | `npx shadcn@latest add https://tetra-ui.com/r/toast.json` |

## For AI agents

```text
You are adding components from @tetra-ui to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/tetra-ui.md) for the component list.
2. Fetch the machine-readable index: https://tetra-ui.com/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: tetra-ui).
```