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. Compound components DX
Skill / Refined UI registry

Compound components DX

Expose named anatomy parts when users need to customize layout or actions.

Goal

Prefer anatomy-based compound components over large prop bags for customizable Refined UI surfaces.

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

Checks

1Expose meaningful parts such as Root, Header, Content, Actions, Media, Title, and Submit when users may customize layout.
2Keep data or state props only where they drive behavior, such as from, state, value, onSubmit, or code.
3Type each part with ComponentProps<> for its rendered element or base UI component.
4Forward remaining native props with ...props and let users customize each part with className.

Avoid

1Adding new visual props when a child component slot would be clearer.
2Centralized classNames slot objects for components that can expose real parts.
3Data arrays for actions or toolbar items when users should compose children directly.

On this page

  • Checks
  • Avoid