Introduction

Good interfaces. Honest code.

Honest UI gives you thoughtful React components, charts, icons, and visual effects that you can adapt to your product. UI components are copied into your project, while charts, icons, logos, vectors, and shaders remain package dependencies with explicit entry points. You can edit copied component source directly and choose which parts to keep.

Choose what you need

Honest UI uses two distribution models. Check a feature's installation page before you begin so you know whether its source will be copied or imported from the package.

Copied components can be edited, renamed, or removed like any other project file. Package entry points keep larger collections available through named imports without copying every source file into your application.

What we live by

• Good defaults, without giving up control. Start with a considered implementation, then change it to fit your product.
• Clear code over clever abstractions. The code should explain its structure and behavior to the people maintaining it.
• Useful design over unnecessary decoration. Components and effects should support a task or communicate meaning.
• Accessibility from the start. Native HTML and accessible primitives provide a foundation; your content and composition still matter.
• No lock-in. You own the code. Copied component source stays in your project, and package features use explicit entry points.
• Quality over hype. The docs state what the code does, where its limits are, and what you still need to verify.

Start here

Use Get Started to initialize an existing React project and add your first UI component. Then use the collection that matches your task:

• Components explains how to choose, install, and adapt interface components.
• Product components combines primitives into complete application patterns such as data tables.
• Theme explains the color, typography, spacing, radius, and effects shared by UI components.
• Animated components adds motion where it clarifies state, direction, or spatial relationships.
• Charts provides composable ECharts-based visualizations.
• Icons, logos, and vectors provides React SVG assets through dedicated package entry points.
• Shaders provides progressive-enhancement effects for expressive surfaces.

Each component page includes the smallest useful example, installation instructions, component anatomy, accessibility responsibilities, and examples for important states when they apply.

Accessibility is shared work

Honest UI provides native elements and interaction primitives where they fit. A component cannot make an entire application accessible by itself. You are still responsible for meaningful labels, logical focus order, useful validation, sufficient contrast, equivalent access to information, and testing the assembled task.

Read Accessibility before changing semantics, keyboard behavior, focus management, validation, or motion.

Open source

Honest UI is available under the MIT license. Read the Contributing Guide to report a problem, improve the documentation, or propose a focused change.