Omarchy Word Count Preview
Preview the word count before writers enter the editor.
- Reduce Clicks
- Simplify Decision Making
Why it works?
Helps users make informed decisions about content engagement by showing the time commitment upfront. This reduces friction and manages expectations before the click, therefore reducing bouce rate.
Key Benefits
- Users can estimate reading time before committing
- Reduces bounce rate by setting proper expectations
- Helps users prioritize content based on available time
- Builds trust through transparency
Perfect for
- Documentation sites with varying article lengths.
- Blog post listings.
- Educational content libraries.
- News aggregators.
pnpm dlx shadcn@latest add https://ux.koszyka.com/r/WordsCountingCard.json
Quick Start
- 1. Install component with dependencies using the CLI command above.
- 2. Use <WordsCountingCard /> component in your codebase.
- 3. Point the `href` prop to any article page to see it in action.
WordsCountingCard Props
| Prop | Type | Required | Description |
|---|---|---|---|
| href | string | Required | Absolute or relative URL to the article whose word count should be displayed. |
| title | string | Optional | Heading shown at the top of the card. Defaults to `Word count`. |
| description | string | Optional | Supporting copy rendered beneath the title to explain the preview. |
| className | string | Optional | Tailwind class names merged into the card root for custom layout. |
| image | string | Optional | Optional hero image URL displayed above the content to reinforce context. |
Source Code
Loading code…