shadcn.io is not affiliated with official shadcn/ui
Feature Adoption Dashboard Block for Ark UI
Eight features as bars split into regular, tried once and never tried, with a plan toggle and a sort select, and for the chosen feature the people who first tried it in the last four weeks and did not return.
Installation
Overview
See how deep each feature goes, not just how many people touched it, with this feature adoption panel for React with Ark UI. A hairline frame with a plus mark on each corner holds eight features (Saved filters, Dashboards, Scheduled reports, Alerts, Integrations, API access, Shared links and Templates), each as one bar of everyone on the plan: regular users in solid foreground, people who tried it once in a lighter weight and people who never tried it as the empty rest. A Toggle Group picks the plan (All, Free, Pro or Team) and a Native Select in the header sorts by regular share, tried once, never tried or name. Choose a feature and the last band lists how many people first tried it in each of the last four weeks and did not come back. It's built from Toggle Group, Native Select and Guides. For product analytics and customer success reviews.
FAQ
How do I fill it with my features?
Edit FEATURES. Each has its name and, for the Free, Pro and Team plans in that order, the people who tried it once and the people who use it regularly. People who never tried it are the plan's size (PLAN_PEOPLE) minus those two. weeks holds the share of the once-only people whose first try fell in each of the last four weeks, and the Tried and stopped counts follow from it. Define regular and once-only to match your own product, for example regular as use in three of the last four weeks.
What do the three parts of a bar mean?
Regular is people who use the feature again and again, tried once is people who used it a single time and did not come back, and never tried is everyone else on the plan. The three always add up to the whole plan, so bars from different features compare directly. There are no curves over time; this view is about depth.
How do I move between features with the keyboard?
The rows are one radio group: Tab lands on the chosen feature and the arrow keys move up or down it, reading the next one in the band below and in a polite line. The sort changes the order but keeps the feature you chose.
What stays local, and how do I wire it for real?
Everything: the counts are typed for 10,800 people as of 11 Oct and nothing is measured. To make it real, count users per feature and plan from your event stream, mark a user once-only or regular by your own rule, and bucket the once-only users by the week of their first try.