Component API
31+ beautiful, cross-platform components built on the Stareezy UI token system. Every component accepts BoxProps for layout and spacing.
@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.
bgcolorppxpyptpbmmxmymtmbroundedborderWidthborderColorwidthheightflexflexDirectionalignItemsjustifyContentgapopacitypositionzIndexoverflowComponents
Cross-platform button with 12 variants, 5 sizes, loading and disabled states.
Text input with focus ring, error state, icons, and prefix slots.
Container card with variants and optional glow colors.
Animated toggle switch with label and size variants.
Collapsible content sections with smooth animation.
Overlay dialog with backdrop blur, smooth animation, and size variants.
Tab navigation with animated indicator — underline, pills, and card variants.
Animated checkbox with indeterminate state and label support.
Range input with custom styling, marks, and value display.
Animated loading indicator — ring, dots, and pulse variants.
User avatar with image, initials fallback, and status indicator.
Horizontal or vertical separator with optional label.
Select with search, option groups, and multi-select.
Linear progress bar with label, percentage, gradient, and striped variants.
Animated notification toast with success, error, warning, and info variants.
Small status indicator with color variants and dot/icon modes.
Floating tooltip on hover with configurable placement.
Slide-in panel from any edge with smooth animation and overlay.
Import example
import {
Box, Text, Button, Input, Accordion,
Avatar, Checkbox, CircularProgress, Clipboard,
Divider, Dropdown, Modal, Progress, Resizer,
Skeleton, Slider, Spinner, Switch, Tabs,
Card, Badge, Tooltip, Drawer, Toast,
NavBar, FileDropZone, ProgressPanel,
} from '@stareezy-ui/components'
import { colors, spacing, radius, t } from '@stareezy-ui/tokens'
// Use BoxProps on every component
<Button type="Primary" text="Click" p={8} rounded={8} />
<Input label="Email" placeholder="you@example.com" mb={16} />
<Card variant="border" title="Hello" bg={t.backgrounds.primary} />