v0.054 components3 targets
Hozorica Design System
One token language. Runtime-specific contracts.
A working component system for React, React Native, and Next.js: compact docs, exact API boundaries, and motion calibrated through shared tokens.
runtime.mapproduction docs
Reactweb primitivesstable
React Nativenative surfacesmapped
Next.jsclient boundariesready
token source@hozorica/hods-tokens
motion profilefast, reduced-safe
docs outputstatic Next.js
Components
Catalog without the showroom padding.
The index is designed for repeated use: quick scanning first, detailed props and runtime notes one click away.
01
Foundation
PrimitivesFoundational Box, Text, media, and layout primitives.LayoutComposition group for Flex, Grid, Stack, Float, and Box layout patterns.TypographyContentReadable content primitives for text, article regions, and stable media frames.BoxToken-aware base layout primitive.FlexBox with flex display defaults and ergonomic aliases.FloatPlaces floating content inside a positioned frame.GridResponsive layout grid with explicit native limits.HStack / VStackOne-axis Flex shortcuts.DividerThin separator for grouping related content.TextSemantic typography primitive.ArticleReadable content region with selection and language policy.AspectRatioIntrinsic-ratio media and preview container.02
03
Forms
TextFieldInputSingle-line text input used inside a TextField wrapper.TextFieldTextareaMulti-line text input that can grow with content.CheckboxMulti-select checkbox item and group with labels, helper text, and error state.RadioGroupSingle-choice radio group with field text and item controls.SelectBoxBordered checkbox and radio option cards for selecting one or more options.SliderSingle or range value selector within a numeric interval.SwitchImmediate on/off control for settings and binary state.05
Feedback
CalloutInline message for important information, tips, and contextual guidance.SnackbarTemporary bottom message for status or result feedback.ProgressCircleCircular progress indicator for pending or determinate work.SkeletonLoading placeholder that previews the shape of content before it appears.ResultSectionFull-section result, empty, success, or error state.ContentPlaceholderCompact empty-state block for missing or filtered content.HelpBubbleAnchored bubble for brief contextual guidance.TooltipShort hover and focus hint for compact controls.06
Overlays
AlertDialogCompound dialog for destructive or interruptive confirmation.BottomSheetModal sheet that rises from the bottom of the viewport.MenuSheetBottom sheet menu for action choices.PopoverAnchored floating panel for lightweight contextual controls.DropdownMenuDesktop menu for compact command lists.07
Display
IconsToken-aware icon inventory and semantic tone previews.AvatarProfile image, fallback, badge, and stacked identity display.IdentityPlaceholderFallback identity mark for avatars, places, media, and documents.ImageFrameToken-styled image surface with ratio, fallback, and loading state.BadgeSmall text label for object state, category, or status.CardToken-styled surface for grouping related content.TagGroupCompact metadata tags separated in one horizontal summary row.ListStructured rows for settings, menus, and selection surfaces.AccordionCollapsible content sections for progressive disclosure.CodeBlockCopyable code surface for examples and installation snippets.