npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

@seda-protocol/ui

v0.1.0

Published

Reusable React design system with shared components, CSS variables, and utilities for SEDA UIs

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Maintainers

franklin-wallerfranklin-wallerthomasvdamthomasvdammariocaomariocao

Keywords

Readme

@seda-protocol/ui

Internal React component library for SEDA applications.

@seda-protocol/ui provides shared UI components, global styling, and CSS-variable theme tokens for building consistent product interfaces across SEDA apps.

Usage

bun add @seda-protocol/ui

Quick start

@seda-protocol/ui exposes compiled CSS and CSS-variable token entrypoints for consumers.

1. Import base styles

In your application entrypoint, or from your app stylesheet:

import "@seda-protocol/ui/styles.css";

This applies the full design system base layer, including CSS variables for shadcn components.

For Tailwind v4 consumers, import the theme overrides from your Tailwind CSS entrypoint:

@import "@seda-protocol/ui/styles.css";
@import "@seda-protocol/ui/styles/tailwind-theme.css";
@import "@seda-protocol/ui/styles/shadcn-theme.css";
@import "tailwindcss/utilities.css";

The overrides expose SEDA tokens as Tailwind utilities such as bg-background, text-h1, rounded-sm, and max-tablet.

2. Use components

import { Button } from "@seda-protocol/ui";

export function App() {
	return <Button>Click me</Button>;
}

3. Set theme

@seda-protocol/ui requires a data-theme attribute on <body>:

<body data-theme="light">

or

<body data-theme="dark">

Components

Import components from the package entrypoint:

import { Button } from "@seda-protocol/ui";

Styles

@seda-protocol/ui exposes multiple styling entrypoints depending on how the consuming app is set up.

Compiled CSS (recommended)

import "@seda-protocol/ui/styles.css";
  • Applies full global/base styling
  • Includes resets, themes, typography, shadcn CSS variables, and generated Tailwind utilities
  • Recommended for apps that want a single CSS import

CSS tokens only

@import "@seda-protocol/ui/styles/tokens.css";

.example {
	padding: var(--space-8);
	color: var(--light-green-500);
}

Use this when you only need design foundations without the global styling layer.

Provides:

  • palettes
  • spacing
  • sizing
  • typography variables
  • breakpoints
  • shapes
  • transitions
  • blur tokens

Specific CSS modules

@import "@seda-protocol/ui/styles/spacings.css";
@import "@seda-protocol/ui/styles/light-palette.css";
@import "@seda-protocol/ui/styles/themes.css";
@import "@seda-protocol/ui/styles/tailwind-theme.css";
@import "@seda-protocol/ui/styles/shadcn-theme.css";

Use for targeted imports when full base styles or tokens are not needed.

Requirements

Theme

Components require a data-theme attribute on <body> so that CSS variables resolve correctly.

shadcn-compatible components use the CSS variables from @seda-protocol/ui/styles.css and support dark mode through body[data-theme="dark"].

Development

This section is for maintainers.

Scripts

  • scripts/fix-package-types.mjs
    Removes style imports from emitted type definitions.

  • scripts/copy-package-assets.mjs
    Copies CSS style files and font assets into dist for publishing.

Build and pack

bun run pack

Builds the package, copies CSS/font assets into dist, and outputs a tarball in artifacts/.

Local validation

bun run example:dev

This packs the library, reinstalls the generated tarball in the example app, and starts the example Vite dev server.

Package structure

The repository is split between library source, Storybook content, packaging helpers, and the example consumer app.

  • src/index.ts Public library entrypoint. Exports the React components, icons, and public types that consumers import from @seda-protocol/ui.
  • src/components/ Library components. Most components live in their own folder with:
    • component.tsx for behavior and public props
    • component.stories.tsx for Storybook coverage when that component has dedicated stories
  • src/styles/ Shared CSS foundations and global styling layers. This includes palettes, spacing, breakpoints, typography, transitions, theme variable definitions, and the published base.css and tokens.css entrypoints.
  • src/res/icons/ React icon components exported by the package.
  • src/res/fonts/ Font assets copied into dist so the published package can load the same typography assets.
  • scripts/ Packaging-only helpers used during the build flow.
  • example/ Consumer smoke-test app. It installs the packed tarball and verifies that component imports, CSS styles, Tailwind utility generation, and theme setup work from the published artifact.
  • dist/ Generated publish output. Contains built JS, emitted type definitions, compiled CSS, copied CSS style files, and copied font assets.

Styling layers

  • src/styles/base.css Full global styling layer. Composes resets, global rules, fonts, theme variables, typography, spacing, shapes, and transitions.

  • src/styles/tokens.css Reusable foundation barrel for apps that want CSS variables without importing the full global layer. The following modules are intentionally not included in tokens.css because they produce side-effects:

  • fonts.css

  • themes.css

Project Decisions

This project uses ADRs to keep track of impactful decisions that were made in the project. The aim is to make it easier for others to onboard later and understand what reasoning went into the choices that were made. All decision records can be found in the docs/decisions directory.

Committing

This project expects commits to adhere to the conventional-commits standard. In order to help enforce this commitlint and husky are used to verify the message on commit.