@labring/sealos-ui

Shared shadcn-based UI components for Sealos frontend apps.

Getting started (Next.js / React apps)

1) Install dependencies

# package + peer deps
pnpm add @labring/sealos-ui react-hook-form sonner

# Tailwind v4 + PostCSS
pnpm add -D tailwindcss @tailwindcss/postcss postcss

For workspace usage, you can also add this in package.json:

{
  "dependencies": {
    "@labring/sealos-ui": "workspace:^"
  }
}

2) Add PostCSS config

// postcss.config.mjs
export default {
  plugins: {
    '@tailwindcss/postcss': {}
  }
};

3) Import styles in your app entry stylesheet

Import in your root stylesheet (for example global.css):

/* Tailwind CSS + theme tokens + base shared styles + shared component @source */
@import '@labring/sealos-ui/shadcn.css';

Usage

import { Button, cn } from '@labring/sealos-ui';

Subpath import is also supported:

import { Button } from '@labring/sealos-ui/button';

Developing this package

pnpm typecheck

Local Showcase App

The repository now includes a private showcase app generated with shadcn create at apps/showcase. It is for local UI preview only and is not published to npm.

pnpm install
pnpm showcase:dev

Build preview app:

pnpm showcase:build

Adding component/hook with shadcn CLI

See: shadcn/ui docs

Sealos Design Skill

This repository also ships the sealos-design agent skill alongside the UI package.

Install it from the GitHub repo with the Skills CLI:

npx skills add mlhiter/sealos-ui --skill sealos-design

Or install by path:

npx skills add https://github.com/mlhiter/sealos-ui/tree/main/skills/sealos-design