@threadws/jute

v0.1.0

Published

21 days ago

Thread Jute's React component library and design tokens, built for Tailwind CSS v4.

0High
0Medium
0Low

pwesterdale

react component-library design-system tailwindcss

jute-components

Thread Jute's React component library and design tokens, built for Tailwind CSS v4. Ships as a normal npm-style package: pre-built components plus a CSS file defining the design tokens as Tailwind v4 @theme values.

Install

bun add file:../path/to/jute-components
# or, once published to a registry:
bun add @threadws/jute

react, react-dom, and tailwindcss are peer dependencies — the consuming project supplies them (react/react-dom ^18 or ^19, tailwindcss ^4).

Setup

In your app's CSS entry point:

@import "tailwindcss";
@import "@threadws/jute/styles.css";
@source "../node_modules/@threadws/jute/dist/**/*.js";

The @source line is required — Tailwind only scans your own project's files by default, so it needs to be told to also scan this package's compiled components to generate the utility classes they use.

Then use components as usual:

import { Button, Input, Tag, cn } from "@threadws/jute";

function Example() {
  return (
    <div data-theme="dark">
      <Button variant="primary">Get in touch</Button>
      <Tag tone="success">Live</Tag>
      <Input label="Email" placeholder="[email protected]" />
    </div>
  );
}

Theming

Set data-theme="dark" or data-theme="light" on <html> (or any ancestor element) to switch themes — dark is the default if the attribute is omitted. All components read color, spacing, and typography from CSS custom properties that flip based on this attribute.

Note: the design tokens intentionally reuse several of Tailwind's own default scale key names (font sizes, border radius, font weight). Importing @threadws/jute/styles.css replaces those keys for your entire project, not just for @threadws/jute — e.g. rounded-lg and text-lg will resolve to Thread Jute's values everywhere once imported. This is intentional (it's a full design-system token set), but worth knowing up front.

Components

core — Avatar, Badge, Button, Card, Eyebrow, IconAnimator, ProcessCard, ServiceCard, Skeleton, StatCard, Tag, Tooltip, WorkCard
forms — Checkbox, CheckboxGroup, Chip, Input, Radio, RadioGroup, Select, Switch, Textarea
navigation — Breadcrumbs, NavBar, Pagination, Sidebar, Stepper, Tabs
data — DataTable
feedback — Dialog, EmptyState, Loader, Toast

All components are named exports from the package root. Most of the library uses plain glyph characters (→, +, ✓, ×) instead of an icon library — Button's animatedIcon prop and IconAnimator are the exception, built on @heroicons/react for a hover icon-swap effect.

Local development

bun install
bun run dev        # demo app at http://localhost:4173, renders every component/variant in both themes
bun run typecheck
bun run build       # builds dist/ (JS, .d.ts, styles, assets)

The demo/ app is a local preview harness only — it isn't published as part of the package.

Published

Vulnerabilities

Links

Maintainers

Keywords