Install

bun add @devup-ui/react @devup-ui/bun-plugin

Usage

Add the zero-config entry to Bun's preload list:

# bunfig.toml
[test]
preload = ["@devup-ui/bun-plugin"]

Custom Shorthands

To configure custom shorthands, preload a local module instead of the zero-config entry:

# bunfig.toml
[test]
preload = ["./devup-ui.preload.ts"]

// devup-ui.preload.ts
import { register } from '@devup-ui/bun-plugin/register'

await register({
  shorthands: {
    insetX: ['left', 'right'],
    scrollMarginX: ['scrollMarginLeft', 'scrollMarginRight'],
  },
})

Custom shorthands are plugin configuration, not theme tokens. Every target receives the same value, and target names may use camelCase or kebab-case. The generated df/theme.d.ts provides type completion for component props, responsive values, and selectors. Restart Bun after changing the option. If tsconfig.json only includes your source directory, add df/*.d.ts to include.

<Box insetX={[0, null, 'auto']} _hover={{ insetX: 4 }} />

Features

• Zero Config
• Zero FOUC (Flash of Unstyled Content)
• Zero Runtime
• Full Bun bundler integration
• TypeScript support with generated theme types
• CSS extraction at build time

Theme Configuration

Create a devup.json file in your project root:

{
  "theme": {
    "colors": {
      "default": {
        "text": "#000",
        "background": "#fff"
      },
      "dark": {
        "text": "#fff",
        "background": "#000"
      }
    }
  }
}

The plugin will generate df/theme.d.ts with TypeScript types for your theme.

How It Works

The plugin transforms your JSX/TSX code at build time:

// Before
<Box bg="red" color="$text" />

// After
<div className="d0 d1" />

Generated CSS:

.d0 {
  background-color: red;
}
.d1 {
  color: var(--text);
}

License

Apache-2.0