UI Shrushank

Overview

UI Shrushank is a React and Tailwind CSS component library by designer Shruti Shankar Narayanan, hosted on her portfolio site. The site lists 194 components across eight categories, each rendered live on its own page with copyable source.

Seven components are free to copy, and the free set is what the public shadcn registry exposes: primary button, ghost button, toggle switch, text field, badge, breadcrumbs and a commit graph, plus an "all" item that installs them together. The other 187 components are sold together as a one-time Pro purchase, according to the site. Interaction states use Framer Motion.

Features

• Free components: Primary and ghost buttons, toggle switch, text field, badge, breadcrumbs and commit graph.
• Install everything: An all registry item adds every free component at once with npm, pnpm, bun or yarn.
• Categories: Buttons and inputs, cards and layout, charts and data viz, navigation, motion and interaction, feedback and status, AI interface and templates.
• Live previews: Each component is shown as a real rendered component, not a screenshot.
• Pro library: The remaining components, including AI interface patterns and seven full-page templates, are paid.

Tech stack

• React, Tailwind CSS
• Framer Motion, Phosphor Icons

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @ui-shrushank/component-name