SundaeSwap UI Toolkit 🛠

This repository contains useful and reusable UI components for the whole SundaeSwap universe.

• View Storybook

Installation

Icons use the private npm package nucleo-ui-outline-18. Set your license key before install (from nucleoapp.com/account):

export NUCLEO_LICENSE_KEY=your-license-key

Add the same variable in CI (GitHub Actions, Vercel, etc.) so bun install can run the package preinstall check.

To install the UI toolkit, from your project run:

bun add @sundaeswap/ui-toolkit @sundaeswap/tailwind-config @sundaeswap/wallet-lite date-fns

Fonts

Components shift text weight to signal state (a selected tab, a checked row, a hovered button). That animates the variable font's wght axis, so the app must load Geist as a CONTINUOUS RANGE, not as pinned instances — a stylesheet built from wght@400;500;700 gives the browser three static faces and the shift snaps instead of interpolating:

<link
  href="https://fonts.googleapis.com/css2?family=Geist:ital,wght@0,100..900;1,100..900&display=swap"
  rel="stylesheet"
/>

Consumers must also import the toolkit's theme after the base one, which is where the interaction tokens (bg-fluid-hover, bg-fluid-active, bg-fluid-selected) and the fluid-label / fluid-kbd-ring utilities live:

@import "tailwindcss";
@import "@sundaeswap/tailwind-config/theme.css";
@import "@sundaeswap/ui-toolkit/theme.css";

How to Contribute

Everyone is welcome to contribute to this project.

Before you start, please make sure to read and understand the following documents:

• Commit Messages
• Code Review
• Storybook

CD

To ensure correct versioning for changes, we expect a version bump to be included within your PR.

previews

Preview deployment links should appear as a comment on every PR. The url format is:

`${slugify(branchName)}.ui-toolkit.solunavax.technology`;

prod

The storybook of the main branch is deployed via CodePipeline to storybook.solunavax.technology