Build your apps with speed and consistency

Eco Components reduce the complexity involved in building web applications by providing pre-designed, high-level components that get your application off the ground and in customers hands more quickly.

DTN at work

Eco is an open source, community-built environment

Contribute to Eco

We work hard to create in-demand components and features, but if your team has or would like to create resources that would benefit other DTN teams, please share them! Learn more about what can be contributed to Eco and the process to do so on our Contributing page.

Less assembly required

The goal of Eco is to provide DTN Application Engineers with the tools needed to create apps quickly and effectively, while aligning to the principles below.

Fast

Go from nothing to a functioning application in very little time.

Focused

Leverage existing tooling and best practices -- no time spent reinventing the wheel.

Consistent

Focus on higher level reusable components and interactions to reduce the time and effort of creating single use designs.

Reusable

Build apps with content-agnostic CSS components to ensure consistency across all design specs.

Lightweight

Remove all unused CSS when building for production, making your final CSS bundle as small as possible (most projects ship less than 10kB of CSS to the client).

Responsive

Create fully responsive and carefully designed apps that look great at any screen size.

Accessible

Adhere to accessibility best practices and W3C standards so that all may benefit from your apps.

Interactive

Interact with live examples to get a full understanding of how these components work before implementing them into your app.

UX front and center

The Eco Component Library has UX design baked in. Each and every component is built to meet the needs of the end user, ensuring their experience is free from common pain points. These UX-based design decisions follow these key principals.

Consistency

Follow standard conventions so that users don’t have to wonder what different actions, words, or situations mean.

Efficient

Provide multiple ways to accomplish tasks and allow users to tailor their actions and outcomes.

Relevant

Showcase only relevant and needed information, ensuring that nothing gets in the user’s way.

Clear

Express error messages in plain language with direct and meaningful instructions to get the user back on track.

Prevention

Help users avoid error-prone actions by ensuring the proper confirmations and paths are presented before an action is committed.

Freedom

Give users control over the path that they are taking in your app, providing a sense of confidence and minimizing frustration.

Visibility

Keep users informed about what is happening in the app through timely and appropriate feedback.

Familiar

Tailor the designs to the user’s so that they feel welcome and engaged in the process.

Ready to dive in?Get started with Eco today!