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

Skin completeness

Treat a skin as a complete source recipe, not a partial class override layer.

Goal

Make every skin a complete visual layer for the public Refined UI component set.

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

Checks

1Each skin implements the same documented component files.
2Skins can replace UI dependencies when the visual behavior needs more than classes.
3Adapters never import skin internals.

Avoid

1Partial skins that only work on one block.
2Variant matrices for theme-level differences.

On this page

  • Checks
  • Avoid