@kilnjs/web

KilnUI for the web. Real DOM, real CSS, no react-native-web.

npm install @kilnjs/web

import { KilnProvider, Button, YStack } from '@kilnjs/web';
import '@kilnjs/web/styles.css';

export function App() {
  return (
    <KilnProvider mode="dark" accent="rust">
      <YStack gap="$3" p="$4">
        <Button tone="primary" onPress={() => {}}>Save</Button>
      </YStack>
    </KilnProvider>
  );
}

A <Button> renders a <button>, <Text> renders a <p> or an <h2>, and styles are atomic CSS classes inside @layer — so SSR produces markup a crawler and a screen reader can both read, and the cascade stays predictable next to Tailwind or anything else you already use.

Entry points

| Import | Contents | | --- | --- | | @kilnjs/web | the components | | @kilnjs/web/styling | styled(), theme hooks, useMedia | | @kilnjs/web/tokens | scales, palettes, themes, motion curves — plain data, server-readable | | @kilnjs/web/primitives | View, Text, Pressable, MotionView, … | | @kilnjs/web/behavior | headless hooks: useDisclosure, usePresence, … | | @kilnjs/web/styles.css | token variables and the reset. Import once. |

styles.css declares the @layer order, so import it after any framework CSS whose rules should lose to a component's own.

Sharing code with React Native

This package is web-only by construction: it contains no .native.* files and never imports react-native. For a module that both a web app and a React Native app import, use @kilnjs/ui — same API, resolved to this package or to @kilnjs/native by the bundler.

MIT © Joao Kdouk