{
  "markdown": "# @kuboxx/craft-ui\n\nReact components with a **handmade desk** look: **paper** surfaces, **rope** frames, and a **crayon** palette. Use it when you want UI that feels like cardstock, tape, and markers—not flat corporate chrome.\n\n**Docs in the browser:** [Storybook](https://craft-ui.jheels.in/)  \n**Package:** [`@kuboxx/craft-ui` on npm](https://www.npmjs.com/package/@kuboxx/craft-ui)\n\n## Install\n\n```bash\nnpm install @kuboxx/craft-ui\n```\n\nPeer dependencies: **React 18+ or 19** (`react`, `react-dom`).\n\n## Quick start\n\nImport components from the package entry and load the stylesheet **once** (usually at your app or layout root). Wrap craft-themed UI in **`CraftProvider`** so typography and theme hooks apply.\n\n```tsx\nimport { CraftProvider, CraftCard, CraftButton, RopeFrame } from '@kuboxx/craft-ui'\nimport '@kuboxx/craft-ui/styles.css'\n\nexport function App() {\n  return (\n    <CraftProvider>\n      <RopeFrame>\n        <CraftCard tint=\"yellow\" elevation=\"lg\">\n          <CraftButton variant=\"clay\" crayon=\"pink\">\n            Hello\n          </CraftButton>\n        </CraftCard>\n      </RopeFrame>\n    </CraftProvider>\n  )\n}\n```\n\nFor a warmer **scrapbook / greeting-card** feel, use `CraftProvider vibe=\"scrapbook\"` and pieces like `CraftTwineGarland`, `CraftLetterChip`, and `CraftCard lift=\"paste\"`. Examples live in Storybook.\n\n### Fonts\n\nFor the intended script and marker typography, load **Caveat** and **Kalam** (see [`.storybook/preview-head.html`](.storybook/preview-head.html) for reference), or set `--craft-font-display` / `--craft-font-marker` in your own CSS.\n\n### Styling and Tailwind\n\nThe library ships **ready-to-use CSS** via `import '@kuboxx/craft-ui/styles.css'` (built with Tailwind; design tokens such as `--craft-paper` and `--craft-orange` live on `:root`). Consumer apps do **not** need Tailwind to use it. If your app also runs Tailwind and you customize purging, you may need to include the package’s built JS in `content`—see advanced notes in published typings or Storybook.\n\n**TypeScript:** all public exports and props are described in **`dist/index.d.ts`** after install (`node_modules/@kuboxx/craft-ui/dist/index.d.ts`).\n\n## What’s in the box\n\nExports include primitives for **layout & surfaces** (e.g. `RopeFrame`, `CraftCard`, `CraftClippedCard`, `CraftClippedStack`, sticky notes, tape strips, washes), **forms** (labels, inputs, radios, switch, select), **navigation** (tabs, breadcrumbs), **overlays & feedback** (tooltip, popover, dialog, alerts, toasts, progress, spinner, skeleton), and **data display** (lists, avatars, table building blocks). **`cn`** is included for class names.\n\nThe interactive catalog, prop variations, and composition ideas are maintained in **[Storybook](https://craft-ui.jheels.in/)**—that’s the best place to browse before coding.\n\n## Agent skill (optional)\n\nThe published tarball includes an **[Agent Skills](https://agentskills.io/)** folder (`cursor-skills/craft-ui-library-usage/`) so tools like **Cursor** or **Claude Code** can follow correct imports, CSS setup, and composition when you ask for help with this library.\n\nCopy that folder from `node_modules` into your project’s skills directory (e.g. `.cursor/skills/` or `.claude/skills/`), or use the plugin layouts in this repo for marketplace submission. Maintainer notes: **[docs/marketplace-publish.md](docs/marketplace-publish.md)**.\n\n## Contributing\n\n```bash\nnpm install\nnpm run storybook   # http://localhost:6006\nnpm run build      # library output in dist/\n```\n\n## License\n\nMIT\n",
  "bytes": 3516,
  "sha": "36f0c358401c87eb2ab9ace87dd8f7682ce9e4a37704fa93bfd2bcffd158dbdc",
  "repo_slug": "helicopterhelicopter/craft-ui",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/plg_helicopterhelicopter_craft_ui_craft_ui_ea6330cc/readme"
}