Refined UI

An opinionated, customizable superset of shadcn/ui

AgentsPrimitivesSkillsSkins
Guides
  • Overview
  • Get started
  • Shadcn compatibility
  • Architecture
  • Agent surface
CSS-first
  • CSS-first interactivity
  • CSS-first motion & sizing
React code quality
  • Derive, do not duplicate
  • Remount state boundaries
  • One responsibility per file
  • Real stack tests
UI / Tailwind
  • Use existing components first
  • Token discipline
  • Class Name boundaries
  • Tailwind v4 CSS configuration
  • Tailwind v4 migration syntax
  • Generated utilities before arbitrary values
  • Variant-first styling
  • Tailwind v4 capabilities
  • Tailwind v4 behavior & motion
UX
  • State continuity
  • Provenance without noise
  • Dense but scannable
  • Say it once
Refined UI registry
  • Skin authoring
  • Extension authoring
  • Registry-first DX
  • Skin completeness
  • Refined UI composition
  • Runtime-agnostic UI
  • Compound components DX
  • Context vs props
  1. Skills
  3. Registry-first DX
Skill / Refined UI registry

Registry-first DX

Keep the registry manifest and installed source as the contract users can inspect.

Goal

Keep the shadcn registry as the install source of truth while avoiding copied demo-only code.

Registry-first guidance for installable Refined UI components, skins, hooks, and blocks.

Checks

1Every installable file is referenced by a registry manifest.
2Docs snippets are read from real source files.
3Generated fixtures are checked by validation scripts.

Avoid

1Maintaining raw code strings in docs.
2Publishing a package API before the registry contract is stable.

On this page

  • Checks
  • Avoid