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
  2. Context vs props
Skill / Refined UI registry

Context vs props

Reach for a compound-component context only when props cannot reach the part, and store intent in it, not styling.

Goal

Keep compound-component context to the cases props cannot cover, and put semantic intent in the value rather than precomputed classes.

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

Checks

1Add a context only when both hold: the Root owns something parts need (state, or a mode that also styles the Root), and consumers place those parts in JSX you do not control, so a prop cannot reach them.
2Store the smallest semantic value — modes, flags, callbacks — and let each part derive its own classes; do not freeze precomputed className strings in the value.
3Let a per-part prop override the context default (`maxHeight ?? context.maxHeight`), so context is the cascade and props are the escape hatch.

Avoid

1Creating a context for parts you fully control or that share nothing with the Root — pass props instead.
2Freezing precomputed Tailwind strings in the context value, which couples every part to the Root and blocks skins from varying by attribute.

On this page

  • Checks
  • Avoid