@deframe-sdk/components

Deframe SDK React component library built with TypeScript and Tailwind CSS.

Installation

npm install @deframe-sdk/components

Usage

Importing Styles

Important: You must import the CSS file for the components to render correctly with their styles.

In your main application file (e.g., _app.tsx, main.tsx, or index.tsx):

// Import the component styles
import '@deframe-sdk/components/styles.css'

Or in your main CSS file:

@import '@deframe-sdk/components/styles.css';

Importing Components

import { PrimaryButton, SecondaryButton, TertiaryButton } from '@deframe-sdk/components'

function App() {
  return (
    <div>
      <PrimaryButton onClick={() => console.log('clicked')}>
        Primary Action
      </PrimaryButton>

      <SecondaryButton disabled={false}>
        Secondary Action
      </SecondaryButton>

      <TertiaryButton type="submit">
        Submit
      </TertiaryButton>
    </div>
  )
}

Available Components

Buttons

• PrimaryButton - Main call-to-action button
• SecondaryButton - Secondary action button with outline
• TertiaryButton - Tertiary action button with subtle styling
• ActionButton - Action button variant
• PercentageButton - Percentage selector button

Component Props

All button components share the same props interface:

interface ButtonProps {
  children: React.ReactNode;
  disabled?: boolean;
  className?: string;
  type?: 'button' | 'submit' | 'reset';
  onClick?: () => void;
}

Development

Running Storybook

npm run storybook

View components in Storybook at http://localhost:6006

Building the Library

npm run build:lib

This will generate:

• CommonJS bundle (dist/index.js)
• ES Module bundle (dist/index.mjs)
• TypeScript declarations (dist/index.d.ts, dist/index.d.mts)
• Compiled CSS with all styles (dist/styles.css)
• Source maps

Project Structure

src/
├── index.ts                    # Main entry point, exports all components
├── stories/
│   └── buttons/
│       ├── PrimaryButton.tsx
│       ├── SecondaryButton.tsx
│       ├── TertiaryButton.tsx
│       ├── ActionButton.tsx
│       └── PercentageButton.tsx
└── styles/
    └── globals.css             # Tailwind CSS configuration

Publishing

The package is configured to automatically build before publishing:

# Bump version
npm version patch  # or minor, major

# Publish to npm
npm publish

The prepublishOnly script will automatically run build:lib before publishing.

Publishing to GitHub Packages

To publish to GitHub Packages instead of npm:

1. Update package.json to add publishConfig:

{
  "publishConfig": {
    "registry": "https://npm.pkg.github.com"
  }
}

2. Authenticate with GitHub Packages:

npm login --registry=https://npm.pkg.github.com

3. Publish:

npm publish

Local Development

To test the library locally in another project:

# In this project
npm run build:lib
npm link

# In your consuming project
npm link @deframe-sdk/components

Peer Dependencies

This package requires:

• React >= 18.0.0
• React DOM >= 18.0.0

License

MIT