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. Refined UI composition
Skill / Refined UI registry

Refined UI composition

Keep blocks readable by composing public agent components, hooks, and slots explicitly.

Goal

Prefer explicit React composition so advanced blocks remain readable after installation.

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

Checks

1Blocks compose documented top-level components.
2Actions are children, not data arrays, when the user may customize layout.
3Reusable behavior lives in hooks or context, not in theme code.

Avoid

1Component factories in installed skin files.
2Duplicated behavior between default and refined skins.

On this page

  • Checks
  • Avoid