UI Components

@tallyui/components provides a set of styled UI components that combine headless primitives with TallyUI's design tokens. They give you a consistent, accessible component library out of the box while remaining fully customizable via className overrides.

How UI components fit in

@tallyui/components (UI)    ← styled, variant-driven
  └─ @tallyui/primitives     ← headless, accessible
       └─ React Native

UI components add:

• CVA variants — predefined visual styles (variant, size) powered by class-variance-authority
• Design tokens — semantic colors (bg-primary, text-destructive-foreground) from @tallyui/theme
• TextClassContext — parent components like Button and Card cascade text styles to descendant Text, Icon, and Loader components automatically

Installation

pnpm add @tallyui/components

Peer dependencies: @tallyui/primitives, @tallyui/theme, react, react-native.

Basic usage

import { Button, Text } from '@tallyui/components';

function MyButton() {
  return (
    <Button variant="destructive" size="sm" onPress={handleDelete}>
      <Text>Delete Item</Text>
    </Button>
  );
}

The Text component inside Button automatically receives destructive text colors via TextClassContext — no manual color prop needed.

Customization

Every component accepts a className prop. Your classes are merged with defaults using cn() from @tallyui/theme, so overrides work cleanly:

<Button className="rounded-full px-8">
  <Text>Custom Shape</Text>
</Button>

Component categories

• Core — Text, HStack, VStack
• Visual — Icon, Loader, Badge, Avatar
• Interactive — Button, IconButton
• Form — Label, Input, Textarea, Checkbox, Switch, RadioGroup, Toggle, ToggleGroup, Slider, Progress
• Containers — Card, Separator, Tabs, Accordion, Collapsible
• Overlay — Dialog, AlertDialog, Popover, Tooltip, HoverCard, Toast
• Menu — Select, Combobox, DropdownMenu, ContextMenu
• Data — Table