@stareezy-ui/components and work on both web and React Native with the same API. Every component extends BoxProps — pass token shorthand props directly to the root container.BoxProps — universal style system
Every component accepts these token-typed shorthand props on its root container. Values can be raw numbers, strings, or Token<T> objects from @stareezy-ui/tokens.
bgcolorppxpyptpbmmxmymtmbroundedborderWidthborderColorwidthheightflexflexDirectionalignItemsjustifyContentgapopacitypositionzIndexoverflowPrimitives
BoxViewTextHStackVStackTouchableOpacityComponents
Collapsible content sections with smooth animation.
User avatar with image, initials fallback, and status indicator.
Cross-platform button with 12 variants, 5 sizes, loading and disabled states.
Animated checkbox with indeterminate state and label support.
SVG-based circular progress with animated stroke-dashoffset.
Copy-to-clipboard with visual feedback and monospace display.
Horizontal or vertical separator with optional label.
Select with search, option groups, and multi-select.
Text input with focus ring, error state, icons, and prefix slots.
Overlay dialog with backdrop blur, smooth animation, and size variants.
Linear progress bar with label, percentage, gradient, and striped variants.
Resizable container with drag handle — horizontal, vertical, or both.
Shimmer loading placeholder — text, circular, rectangular, rounded.
Range input with custom styling, marks, and value display.
Animated loading indicator — ring, dots, and pulse variants.
Animated toggle switch with label and size variants.
Tab navigation with animated indicator — underline, pills, and card variants.
Usage example
import {
Box, Text, Button, Input, Accordion,
Avatar, Checkbox, CircularProgress, Clipboard,
Divider, Dropdown, Modal, Progress, Resizer,
Skeleton, Slider, Spinner, Switch, Tabs,
} from '@stareezy-ui/components'
import { colors, spacing, radius } from '@stareezy-ui/tokens'
// Every component accepts BoxProps
<Spinner size="md" p={8} bg={colors.beauBlue[50]} rounded={radius.md} />
<Progress value={72} showPercentage label="Upload" mx={16} />
<Avatar name="Bintang R" size="lg" status="online" mr={8} />
<Checkbox checked label="Accept terms" p={12} />