Distribution

One design system, separate runtime packages.

The packages keep static HTML, React, React Native, and Next.js integration explicit while sharing the same token language.

@hozorica/hods-tokens

Complete typed token object plus curated runtime CSS custom properties.

pnpm add @hozorica/hods-tokens

import "@hozorica/hods-tokens/tokens.css";

@hozorica/hods-css

Build-free HTML classes for landing pages, card news, and static editorial pages.

pnpm add @hozorica/hods-css

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@hozorica/hods-tokens/tokens.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@hozorica/hods-css/hods.css">

@hozorica/hods-react

Web primitives and accessible components for React applications.

pnpm add @hozorica/hods-react

import "@hozorica/hods-react/tokens.css";
import { Box, Text, ActionButton } from "@hozorica/hods-react";

@hozorica/hods-react-native

React Native primitives that share token names and component contracts.

pnpm add @hozorica/hods-react-native

import { Box, Text, ActionButton } from "@hozorica/hods-react-native";

@hozorica/hods-next

Next.js entrypoint with React exports and a light-default theme script.

pnpm add @hozorica/hods-next

import { ThemeScript, Box } from "@hozorica/hods-next";
import "@hozorica/hods-next/tokens.css";

React export map

Root primitives

Layout primitives and core controls are imported from the package root.

import { ActionButton, Box, Flex, Grid, GridItem, HStack, Text, VStack } from "@hozorica/hods-react";

Focused subpaths

Compound component families use focused subpath exports when they have a dedicated public surface.

import { Callout } from "@hozorica/hods-react/callout";
import { TabsRoot, TabsList, TabsTrigger, TabsContent } from "@hozorica/hods-react/tabs";

Required CSS

Token CSS is a side-effect import and should be loaded once near the app root.

import "@hozorica/hods-react/tokens.css";