---
name: "@tile-ui"
slug: "tile-ui"
description: "A lightweight React component library built around a shared SCSS design system and distributed as editable source through the shadcn CLI."
category: "Charts/data viz"
tags: ["auth", "buttons", "cards", "charts", "dashboard", "design-system", "forms", "hooks", "loaders", "media", "navigation", "overlays", "pro-available", "tables", "theming"]
framework: "react"
license: "MIT"
author: "zmide"
website: "https://github.com/zmide/tile-ui"
github: "https://github.com/zmide/tile-ui"
registry: "https://react.tileui.zmorg.cn/r/registry.json"
pro: true
pro_url: "https://github.com/enterprise/premium-support"
github_stars: 2
component_count: 71
generated_at: "2026-09-21T01:50:16.753Z"
---

# @tile-ui

A lightweight React component library built around a shared SCSS design system and distributed as editable source through the shadcn CLI.

## Links

- Website: https://github.com/zmide/tile-ui
- GitHub: https://github.com/zmide/tile-ui
- Registry JSON: https://react.tileui.zmorg.cn/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/tile-ui
- This file: https://sh4dcn.vercel.app/md/tile-ui.md
- Pro / pricing: https://github.com/enterprise/premium-support

## Install

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

## Components (71)

| name | type | description | install |
| --- | --- | --- | --- |
| liveline-core | registry:lib | Framework-independent canvas engine, drawing, and math modules for Liveline. | `npx shadcn@latest add https://react.tileui.zmorg.cn/r/liveline-core.json` |
| core | registry:lib | Registry runtime helpers for React Tile UI items. | `npx shadcn@latest add https://react.tileui.zmorg.cn/r/core.json` |
| utils | registry:lib | Shared utility helpers for Tile UI registries. | `npx shadcn@latest add https://react.tileui.zmorg.cn/r/utils.json` |
| portal | registry:lib | Shared portal container provider and hook for React Tile UI overlays. | `npx shadcn@latest add https://react.tileui.zmorg.cn/r/portal.json` |
| styles | registry:style | Tile UI runtime extensions and shared Sass dependencies. | `npx shadcn@latest add https://react.tileui.zmorg.cn/r/styles.json` |
| theme-default | registry:theme | Optional Tile UI default palette and runtime token theme. | `npx shadcn@latest add https://react.tileui.zmorg.cn/r/theme-default.json` |
| use-copy-to-clipboard | registry:hook | React hook for clipboard copy interactions. | `npx shadcn@latest add https://react.tileui.zmorg.cn/r/use-copy-to-clipboard.json` |
| use-media-query | registry:hook | React hook for viewport and media query state. | `npx shadcn@latest add https://react.tileui.zmorg.cn/r/use-media-query.json` |
| use-local-storage | registry:hook | React hook for local and session storage state. | `npx shadcn@latest add https://react.tileui.zmorg.cn/r/use-local-storage.json` |
| button | registry:ui | Multi-variant React button component for Tile UI. | `npx shadcn@latest add https://react.tileui.zmorg.cn/r/button.json` |
| input | registry:ui | Accessible React input component for Tile UI. | `npx shadcn@latest add https://react.tileui.zmorg.cn/r/input.json` |
| textarea | registry:ui | Accessible React textarea component for Tile UI. | `npx shadcn@latest add https://react.tileui.zmorg.cn/r/textarea.json` |
| label | registry:ui | React label primitive for Tile UI forms. | `npx shadcn@latest add https://react.tileui.zmorg.cn/r/label.json` |
| card | registry:ui | Composable React card primitives for Tile UI. | `npx shadcn@latest add https://react.tileui.zmorg.cn/r/card.json` |
| badge | registry:ui | Multi-variant React badge component for Tile UI. | `npx shadcn@latest add https://react.tileui.zmorg.cn/r/badge.json` |
| skeleton | registry:ui | Loading placeholder React component for Tile UI. | `npx shadcn@latest add https://react.tileui.zmorg.cn/r/skeleton.json` |
| kbd | registry:ui | Keyboard key display primitives for Tile UI. | `npx shadcn@latest add https://react.tileui.zmorg.cn/r/kbd.json` |
| separator | registry:ui | Horizontal or vertical divider component for Tile UI. | `npx shadcn@latest add https://react.tileui.zmorg.cn/r/separator.json` |
| table | registry:ui | Composable React table primitives for Tile UI. | `npx shadcn@latest add https://react.tileui.zmorg.cn/r/table.json` |
| progress | registry:ui | Progress bar component for Tile UI. | `npx shadcn@latest add https://react.tileui.zmorg.cn/r/progress.json` |
| avatar | registry:ui | User avatar primitives with image fallback for Tile UI. | `npx shadcn@latest add https://react.tileui.zmorg.cn/r/avatar.json` |
| switch | registry:ui | Accessible toggle switch component for Tile UI. | `npx shadcn@latest add https://react.tileui.zmorg.cn/r/switch.json` |
| checkbox | registry:ui | Accessible checkbox with indeterminate state for Tile UI. | `npx shadcn@latest add https://react.tileui.zmorg.cn/r/checkbox.json` |
| collapsible | registry:ui | Accessible collapsible content component for Tile UI. | `npx shadcn@latest add https://react.tileui.zmorg.cn/r/collapsible.json` |
| breadcrumb | registry:ui | Navigation breadcrumb primitives for Tile UI. | `npx shadcn@latest add https://react.tileui.zmorg.cn/r/breadcrumb.json` |
| pagination | registry:ui | Navigation pagination primitives for Tile UI. | `npx shadcn@latest add https://react.tileui.zmorg.cn/r/pagination.json` |
| alert | registry:ui | Alert banner primitives for Tile UI. | `npx shadcn@latest add https://react.tileui.zmorg.cn/r/alert.json` |
| aspect-ratio | registry:ui | Fixed-ratio content container for Tile UI. | `npx shadcn@latest add https://react.tileui.zmorg.cn/r/aspect-ratio.json` |
| spinner | registry:ui | Loading spinner component for Tile UI. | `npx shadcn@latest add https://react.tileui.zmorg.cn/r/spinner.json` |
| empty | registry:ui | Empty state primitives for Tile UI. | `npx shadcn@latest add https://react.tileui.zmorg.cn/r/empty.json` |
| marker | registry:ui | Status marker component for Tile UI. | `npx shadcn@latest add https://react.tileui.zmorg.cn/r/marker.json` |
| item | registry:ui | Composable list item primitives for Tile UI. | `npx shadcn@latest add https://react.tileui.zmorg.cn/r/item.json` |
| button-group | registry:ui | Grouped button container for Tile UI. | `npx shadcn@latest add https://react.tileui.zmorg.cn/r/button-group.json` |
| input-group | registry:ui | Composable input group primitives for Tile UI. | `npx shadcn@latest add https://react.tileui.zmorg.cn/r/input-group.json` |
| native-select | registry:ui | Native select with custom chevron for Tile UI. | `npx shadcn@latest add https://react.tileui.zmorg.cn/r/native-select.json` |
| field | registry:ui | Field label/description/message wrapper for Tile UI. | `npx shadcn@latest add https://react.tileui.zmorg.cn/r/field.json` |
| toggle | registry:ui | Toggle button with pressed state for Tile UI. | `npx shadcn@latest add https://react.tileui.zmorg.cn/r/toggle.json` |
| toggle-group | registry:ui | Grouped toggle buttons for Tile UI. | `npx shadcn@latest add https://react.tileui.zmorg.cn/r/toggle-group.json` |
| tabs | registry:ui | Tabs navigation primitives for Tile UI. | `npx shadcn@latest add https://react.tileui.zmorg.cn/r/tabs.json` |
| accordion | registry:ui | Collapsible accordion for Tile UI. | `npx shadcn@latest add https://react.tileui.zmorg.cn/r/accordion.json` |
| radio-group | registry:ui | Radio group selection for Tile UI. | `npx shadcn@latest add https://react.tileui.zmorg.cn/r/radio-group.json` |
| slider | registry:ui | Slider control for Tile UI. | `npx shadcn@latest add https://react.tileui.zmorg.cn/r/slider.json` |
| scroll-area | registry:ui | Custom scroll area for Tile UI. | `npx shadcn@latest add https://react.tileui.zmorg.cn/r/scroll-area.json` |
| tooltip | registry:ui | Tooltip overlay for Tile UI. | `npx shadcn@latest add https://react.tileui.zmorg.cn/r/tooltip.json` |
| popover | registry:ui | Popover overlay for Tile UI. | `npx shadcn@latest add https://react.tileui.zmorg.cn/r/popover.json` |
| hover-card | registry:ui | Hover card overlay for Tile UI. | `npx shadcn@latest add https://react.tileui.zmorg.cn/r/hover-card.json` |
| dialog | registry:ui | Modal dialog for Tile UI. | `npx shadcn@latest add https://react.tileui.zmorg.cn/r/dialog.json` |
| alert-dialog | registry:ui | Alert dialog for Tile UI. | `npx shadcn@latest add https://react.tileui.zmorg.cn/r/alert-dialog.json` |
| sheet | registry:ui | Side sheet overlay for Tile UI. | `npx shadcn@latest add https://react.tileui.zmorg.cn/r/sheet.json` |
| dropdown-menu | registry:ui | Dropdown menu with checkbox and radio items for Tile UI. | `npx shadcn@latest add https://react.tileui.zmorg.cn/r/dropdown-menu.json` |
| context-menu | registry:ui | Right-click context menu for Tile UI. | `npx shadcn@latest add https://react.tileui.zmorg.cn/r/context-menu.json` |
| menubar | registry:ui | Horizontal menu bar for Tile UI. | `npx shadcn@latest add https://react.tileui.zmorg.cn/r/menubar.json` |
| navigation-menu | registry:ui | Navigation menu with viewport for Tile UI. | `npx shadcn@latest add https://react.tileui.zmorg.cn/r/navigation-menu.json` |
| select | registry:ui | Custom select dropdown for Tile UI. | `npx shadcn@latest add https://react.tileui.zmorg.cn/r/select.json` |
| combobox | registry:ui | Searchable combobox for Tile UI. | `npx shadcn@latest add https://react.tileui.zmorg.cn/r/combobox.json` |
| command | registry:ui | Command palette primitives for Tile UI. | `npx shadcn@latest add https://react.tileui.zmorg.cn/r/command.json` |
| chart | registry:ui | Chart primitives for Tile UI. | `npx shadcn@latest add https://react.tileui.zmorg.cn/r/chart.json` |
| calendar | registry:ui | Calendar component for Tile UI. | `npx shadcn@latest add https://react.tileui.zmorg.cn/r/calendar.json` |
| drawer | registry:ui | Drawer overlay for Tile UI. | `npx shadcn@latest add https://react.tileui.zmorg.cn/r/drawer.json` |
| form | registry:ui | Form primitives for Tile UI. | `npx shadcn@latest add https://react.tileui.zmorg.cn/r/form.json` |
| sidebar | registry:ui | Sidebar layout for Tile UI. | `npx shadcn@latest add https://react.tileui.zmorg.cn/r/sidebar.json` |
| carousel | registry:ui | Carousel component for Tile UI. | `npx shadcn@latest add https://react.tileui.zmorg.cn/r/carousel.json` |
| resizable | registry:ui | Resizable panel group for Tile UI. | `npx shadcn@latest add https://react.tileui.zmorg.cn/r/resizable.json` |
| attachment | registry:ui | Attachment primitives for Tile UI. | `npx shadcn@latest add https://react.tileui.zmorg.cn/r/attachment.json` |
| bubble | registry:ui | Bubble chat primitives for Tile UI. | `npx shadcn@latest add https://react.tileui.zmorg.cn/r/bubble.json` |
| direction | registry:ui | Direction provider for Tile UI. | `npx shadcn@latest add https://react.tileui.zmorg.cn/r/direction.json` |
| message | registry:ui | Message primitives for Tile UI. | `npx shadcn@latest add https://react.tileui.zmorg.cn/r/message.json` |
| message-scroller | registry:ui | Message scroller for Tile UI. | `npx shadcn@latest add https://react.tileui.zmorg.cn/r/message-scroller.json` |
| sonner | registry:ui | Toast notifications for Tile UI. | `npx shadcn@latest add https://react.tileui.zmorg.cn/r/sonner.json` |
| input-otp | registry:ui | One-time password input for Tile UI. | `npx shadcn@latest add https://react.tileui.zmorg.cn/r/input-otp.json` |
| liveline | registry:ui | Real-time React canvas chart with line, multi-series, candlestick, and market-data modes. | `npx shadcn@latest add https://react.tileui.zmorg.cn/r/liveline.json` |

## For AI agents

```text
You are adding components from @tile-ui to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/tile-ui.md) for the component list.
2. Fetch the machine-readable index: https://react.tileui.zmorg.cn/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: tile-ui).
```