@kb.ui/react 0.10.2 → 0.10.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +22 -8
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,15 +1,29 @@
|
|
|
1
1
|
# @kb.ui/react
|
|
2
2
|
|
|
3
|
-
React components for forms, navigation, feedback, and
|
|
3
|
+
React components for forms, navigation, feedback, layout and typography. This adapter bundles the complete kbui stylesheet and CSS tokens. [Base UI](https://base-ui.com) 1.9 and `clsx` install automatically as runtime dependencies.
|
|
4
4
|
|
|
5
5
|
Default themes use monochrome light/dark surfaces, a persimmon accent, and shared tactile materials. This reference follows the source on `main`; check the [release notes](https://github.com/KhallilB/kbui/releases) for the exports available in an installed version.
|
|
6
6
|
|
|
7
|
+
## Installation
|
|
8
|
+
|
|
9
|
+
In your React app's folder:
|
|
10
|
+
|
|
11
|
+
```sh
|
|
12
|
+
npm install @kb.ui/react
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
Your app supplies `react` and `react-dom` 19 or later. TypeScript apps need compatible React type packages. Import the bundled stylesheet once at your app entry or framework's global-style entry:
|
|
16
|
+
|
|
7
17
|
```tsx
|
|
8
18
|
import "@kb.ui/react/styles.css";
|
|
9
|
-
import { Button
|
|
19
|
+
import { Button } from "@kb.ui/react";
|
|
20
|
+
|
|
21
|
+
export function Save() {
|
|
22
|
+
return <Button>Save changes</Button>;
|
|
23
|
+
}
|
|
10
24
|
```
|
|
11
25
|
|
|
12
|
-
|
|
26
|
+
The React adapter provides the components, styles and CSS variables together. Install the optional `@kb.ui/tokens` package only for typed variable names or token-only assets. Keep all installed kbui packages on one version. [Get Started](https://kbui.kcb.pro/setup/) generates versioned commands for npm, Bun, pnpm and Yarn; the [usage guide](../../docs/guides/using-kbui.md) covers prerequisites, upgrading, local development and troubleshooting.
|
|
13
27
|
|
|
14
28
|
## Styling
|
|
15
29
|
|
|
@@ -611,7 +625,7 @@ Root native div props/ref and className pass through. Root aria-describedby merg
|
|
|
611
625
|
|
|
612
626
|
## Heading
|
|
613
627
|
|
|
614
|
-
Native `h1`–`h6` headings with visual size independent of rank.
|
|
628
|
+
Native `h1`–`h6` headings with visual size independent of rank.
|
|
615
629
|
|
|
616
630
|
| Prop | Type | Default | Notes |
|
|
617
631
|
|---|---|---|---|
|
|
@@ -623,7 +637,7 @@ Use one page title and nest section ranks without skipping levels. Adjust `size`
|
|
|
623
637
|
|
|
624
638
|
## Text
|
|
625
639
|
|
|
626
|
-
Body paragraphs, inline text and block grouping.
|
|
640
|
+
Body paragraphs, inline text and block grouping.
|
|
627
641
|
|
|
628
642
|
| Prop | Type | Default | Notes |
|
|
629
643
|
|---|---|---|---|
|
|
@@ -636,7 +650,7 @@ Body line height is 1.6; block content is bounded to 65ch by `--kb-text-measure`
|
|
|
636
650
|
|
|
637
651
|
## Link
|
|
638
652
|
|
|
639
|
-
Native anchor for navigation, with persistent underline and visible keyboard focus.
|
|
653
|
+
Native anchor for navigation, with persistent underline and visible keyboard focus.
|
|
640
654
|
|
|
641
655
|
| Prop | Type | Default | Notes |
|
|
642
656
|
|---|---|---|---|
|
|
@@ -648,7 +662,7 @@ Use descriptive link text. Use Button for an action. Links inherit surrounding t
|
|
|
648
662
|
|
|
649
663
|
## Code
|
|
650
664
|
|
|
651
|
-
Literal inline code, commands and paths in native `code`.
|
|
665
|
+
Literal inline code, commands and paths in native `code`.
|
|
652
666
|
|
|
653
667
|
| Prop | Type | Default | Notes |
|
|
654
668
|
|---|---|---|---|
|
|
@@ -659,7 +673,7 @@ Monospace text inherits surrounding ink and line height, uses a relative size an
|
|
|
659
673
|
|
|
660
674
|
## Container
|
|
661
675
|
|
|
662
|
-
Centered page boundary with responsive inline gutters. Native props and matching ref pass through. See [Layout composition](../../docs/guides/layout.md) for rules, CSS recipes and token overrides.
|
|
676
|
+
Centered page boundary with responsive inline gutters. Native props and matching ref pass through. See [Layout composition](../../docs/guides/layout.md) for rules, CSS recipes and token overrides.
|
|
663
677
|
|
|
664
678
|
| Prop | Values | Default |
|
|
665
679
|
|---|---|---|
|