---
name: "@ui-shrushank"
slug: "ui-shrushank"
description: "Free React and Tailwind components with Framer Motion interaction states and Tailwind CSS styling: buttons, badge, text field, toggle switch and breadcrumbs."
category: "Animated components"
tags: ["animation", "buttons", "charts", "navigation", "theming"]
framework: "react"
license: "MIT"
author: "Shrootiiii"
website: "https://www.shrutishankarnarayanan.com/components"
github: "https://github.com/Shrootiiii/ui"
registry: "https://raw.githubusercontent.com/Shrootiiii/ui/main/r/registry.json"
pro: false
pro_url: null
github_stars: 0
component_count: 8
generated_at: "2026-09-21T01:50:16.753Z"
---

# @ui-shrushank

Free React and Tailwind components with Framer Motion interaction states and Tailwind CSS styling: buttons, badge, text field, toggle switch and breadcrumbs.

## Links

- Website: https://www.shrutishankarnarayanan.com/components
- GitHub: https://github.com/Shrootiiii/ui
- Registry JSON: https://raw.githubusercontent.com/Shrootiiii/ui/main/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/ui-shrushank
- This file: https://sh4dcn.vercel.app/md/ui-shrushank.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://raw.githubusercontent.com/Shrootiiii/ui/main/r/registry.json
pnpm dlx shadcn@latest add https://raw.githubusercontent.com/Shrootiiii/ui/main/r/registry.json
bunx shadcn@latest add https://raw.githubusercontent.com/Shrootiiii/ui/main/r/registry.json
# clone the source repo
git clone https://github.com/Shrootiiii/ui.git
# fetch the raw registry index
curl -s https://raw.githubusercontent.com/Shrootiiii/ui/main/r/registry.json
```

## Components (8)

| name | type | description | install |
| --- | --- | --- | --- |
| primary-button | registry:component | The default call to action, solid fill with hover and focus states. | `npx shadcn@latest add https://raw.githubusercontent.com/Shrootiiii/ui/main/r/primary-button.json` |
| ghost-button | registry:component | A lower-emphasis outline button for secondary actions. | `npx shadcn@latest add https://raw.githubusercontent.com/Shrootiiii/ui/main/r/ghost-button.json` |
| toggle-switch | registry:component | An accessible on/off switch built on a native button. | `npx shadcn@latest add https://raw.githubusercontent.com/Shrootiiii/ui/main/r/toggle-switch.json` |
| text-field | registry:component | A labeled text input with clear focus and placeholder states. | `npx shadcn@latest add https://raw.githubusercontent.com/Shrootiiii/ui/main/r/text-field.json` |
| badge | registry:component | A small status pill with neutral, success, and warning tones. | `npx shadcn@latest add https://raw.githubusercontent.com/Shrootiiii/ui/main/r/badge.json` |
| breadcrumbs | registry:component | A simple breadcrumb trail with an aria-current page marker. | `npx shadcn@latest add https://raw.githubusercontent.com/Shrootiiii/ui/main/r/breadcrumbs.json` |
| commit-graph | registry:component | A contribution heatmap paged by two-week sprints, drillable to the day. | `npx shadcn@latest add https://raw.githubusercontent.com/Shrootiiii/ui/main/r/commit-graph.json` |
| all | registry:component | All 7 free components in one install. Premium items are available to Pro buyers from the private registry. | `npx shadcn@latest add https://raw.githubusercontent.com/Shrootiiii/ui/main/r/all.json` |

## For AI agents

```text
You are adding components from @ui-shrushank to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/ui-shrushank.md) for the component list.
2. Fetch the machine-readable index: https://raw.githubusercontent.com/Shrootiiii/ui/main/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: ui-shrushank).
```