sc1m

Overview

sc1m is an open multi-brand design system by Michael Anthony Raquel, a product designer in Manila. It provides React 19 components built on Base UI and styled with Tailwind CSS v4 semantic tokens. The default brand is sc1m, and additional brands (currently Luntian) ship as swappable CSS layers scoped under a data-brand attribute on <html>.

The registry lists 43 items: a tokens theme, a cn helper and 41 UI components. Every component declares the token layer as a dependency, so a single add merges the theme contract into the project's CSS and installs @base-ui/react, clsx and tailwind-merge. Component source has no next/* imports and works in Next.js, Vite or any React 19 and Tailwind v4 app.

Features

• Token contract: 15 color roles plus radii, shadows, motion and popup-motion, ai-wash and ai-pulse utilities
• Dark mode: Toggled with a .dark class on <html>, compatible with next-themes, with no dark: utilities needed
• Swappable brands: New brands define the same token contract under [data-brand="…"], with a boilerplate template in the repo
• Base UI components: Accordion, autocomplete, combobox, dialog, drawer, menubar, number field, OTP field, preview card, toast, toolbar and more
• Status components: Badge with five tones, borderless Banner with four tones, and Meter and Progress for feedback
• AI Summary: A banner that marks AI-authored copy on an animated vector field in four palettes
• Docs and CI: Fumadocs pages with live previews and prop references, plus CI checks for registry output and token parity

Tech stack

• React 19, TypeScript, Next.js
• Base UI, Tailwind CSS v4
• shadcn CLI registry, Fumadocs

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @sc1m/component-name