---
name: "@nessra-ui"
slug: "nessra-ui"
description: "A production-ready registry of 60+ React and Next.js components built on Radix UI primitives with Tailwind CSS v4, strictly typed with TypeScript. Covers standard UI (Accordion through Tooltip), plus extras like Button Group, Code Block, Copy Button, Empty Field, Input Group, Number Input, Spinner, Stat Card, Tag Input, Toggle Group, and Typography. Auth blocks include Sign In, Sign Up, Forgot Password, and Reset Password flows. Also includes a TanStack Form integration and a Data Table. Accessible by default with full keyboard navigation; no runtime dependency. Use for: app scaffolding that needs accessible Radix-based components on Tailwind v4 without a paid tier."
category: "Component library (general)"
tags: ["accessibility", "auth", "blocks", "buttons", "cards", "charts", "components", "dashboard", "design-system", "developer-tools", "forms", "hooks", "loaders", "media", "mobile", "navigation", "overlays", "tables"]
framework: "react"
license: "MIT"
author: "codewithmehmet"
website: "https://nessra-ui.vercel.app"
github: "https://github.com/codewithmehmet/nessra-ui"
registry: "https://nessra-ui.vercel.app/r/registry.json"
pro: false
pro_url: null
github_stars: 1
component_count: 62
generated_at: "2026-07-28T08:59:05.895Z"
---

# @nessra-ui

A production-ready registry of 60+ React and Next.js components built on Radix UI primitives with Tailwind CSS v4, strictly typed with TypeScript. Covers standard UI (Accordion through Tooltip), plus extras like Button Group, Code Block, Copy Button, Empty Field, Input Group, Number Input, Spinner, Stat Card, Tag Input, Toggle Group, and Typography. Auth blocks include Sign In, Sign Up, Forgot Password, and Reset Password flows. Also includes a TanStack Form integration and a Data Table. Accessible by default with full keyboard navigation; no runtime dependency. Use for: app scaffolding that needs accessible Radix-based components on Tailwind v4 without a paid tier.

## Links

- Website: https://nessra-ui.vercel.app
- GitHub: https://github.com/codewithmehmet/nessra-ui
- Registry JSON: https://nessra-ui.vercel.app/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/nessra-ui
- This file: https://sh4dcn.vercel.app/md/nessra-ui.md

## Install

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

## Components (62)

| name | type | description | install |
| --- | --- | --- | --- |
| utils | registry:lib | — | `npx shadcn@latest add https://nessra-ui.vercel.app/r/utils.json` |
| use-mobile | registry:hook | — | `npx shadcn@latest add https://nessra-ui.vercel.app/r/use-mobile.json` |
| button | registry:ui | Displays a button or a component that looks like a button. | `npx shadcn@latest add https://nessra-ui.vercel.app/r/button.json` |
| card | registry:ui | Displays a card with header, content, and footer. | `npx shadcn@latest add https://nessra-ui.vercel.app/r/card.json` |
| input | registry:ui | Displays a form input field. | `npx shadcn@latest add https://nessra-ui.vercel.app/r/input.json` |
| label | registry:ui | Renders an accessible label associated with controls. | `npx shadcn@latest add https://nessra-ui.vercel.app/r/label.json` |
| form | registry:ui | Form field components for building accessible forms with TanStack Form. | `npx shadcn@latest add https://nessra-ui.vercel.app/r/form.json` |
| textarea | registry:ui | Displays a form textarea. | `npx shadcn@latest add https://nessra-ui.vercel.app/r/textarea.json` |
| select | registry:ui | Displays a list of options for the user to pick from. | `npx shadcn@latest add https://nessra-ui.vercel.app/r/select.json` |
| checkbox | registry:ui | A control that allows the user to toggle between checked and not checked. | `npx shadcn@latest add https://nessra-ui.vercel.app/r/checkbox.json` |
| switch | registry:ui | A control that allows the user to toggle between on and off. | `npx shadcn@latest add https://nessra-ui.vercel.app/r/switch.json` |
| dialog | registry:ui | A window overlaid on the primary window. | `npx shadcn@latest add https://nessra-ui.vercel.app/r/dialog.json` |
| alert-dialog | registry:ui | A modal dialog that interrupts the user with important content. | `npx shadcn@latest add https://nessra-ui.vercel.app/r/alert-dialog.json` |
| dropdown-menu | registry:ui | Displays a menu to the user with a list of actions or options. | `npx shadcn@latest add https://nessra-ui.vercel.app/r/dropdown-menu.json` |
| tabs | registry:ui | A set of layered sections of content, known as tab panels. | `npx shadcn@latest add https://nessra-ui.vercel.app/r/tabs.json` |
| accordion | registry:ui | A vertically stacked set of interactive headings. | `npx shadcn@latest add https://nessra-ui.vercel.app/r/accordion.json` |
| avatar | registry:ui | An image element with a fallback for representing the user. | `npx shadcn@latest add https://nessra-ui.vercel.app/r/avatar.json` |
| badge | registry:ui | Displays a badge or a component that looks like a badge. | `npx shadcn@latest add https://nessra-ui.vercel.app/r/badge.json` |
| separator | registry:ui | Visually separates content. | `npx shadcn@latest add https://nessra-ui.vercel.app/r/separator.json` |
| tooltip | registry:ui | A popup that displays information related to an element. | `npx shadcn@latest add https://nessra-ui.vercel.app/r/tooltip.json` |
| collapsible | registry:ui | An interactive component which expands/collapses a panel. | `npx shadcn@latest add https://nessra-ui.vercel.app/r/collapsible.json` |
| code-block | registry:ui | Display code with syntax highlighting powered by Shiki. | `npx shadcn@latest add https://nessra-ui.vercel.app/r/code-block.json` |
| alert | registry:ui | Displays a callout for user attention. | `npx shadcn@latest add https://nessra-ui.vercel.app/r/alert.json` |
| progress | registry:ui | Displays an indicator showing the completion progress of a task. | `npx shadcn@latest add https://nessra-ui.vercel.app/r/progress.json` |
| sheet | registry:ui | Extends the Dialog component to display content that complements the main content of the screen. | `npx shadcn@latest add https://nessra-ui.vercel.app/r/sheet.json` |
| sonner | registry:ui | An opinionated toast component for React. | `npx shadcn@latest add https://nessra-ui.vercel.app/r/sonner.json` |
| popover | registry:ui | Displays rich content in a portal, triggered by a button. | `npx shadcn@latest add https://nessra-ui.vercel.app/r/popover.json` |
| skeleton | registry:ui | Use to show a placeholder while content is loading. | `npx shadcn@latest add https://nessra-ui.vercel.app/r/skeleton.json` |
| slider | registry:ui | An input where the user selects a value from within a given range. | `npx shadcn@latest add https://nessra-ui.vercel.app/r/slider.json` |
| scroll-area | registry:ui | Augments native scroll functionality for custom, cross-browser styling. | `npx shadcn@latest add https://nessra-ui.vercel.app/r/scroll-area.json` |
| radio-group | registry:ui | A set of checkable buttons where only one can be checked at a time. | `npx shadcn@latest add https://nessra-ui.vercel.app/r/radio-group.json` |
| toggle | registry:ui | A two-state button that can be either on or off. | `npx shadcn@latest add https://nessra-ui.vercel.app/r/toggle.json` |
| aspect-ratio | registry:ui | Displays content within a desired ratio. | `npx shadcn@latest add https://nessra-ui.vercel.app/r/aspect-ratio.json` |
| hover-card | registry:ui | For sighted users to preview content available behind a link. | `npx shadcn@latest add https://nessra-ui.vercel.app/r/hover-card.json` |
| breadcrumb | registry:ui | Displays the path to the current resource using a hierarchy of links. | `npx shadcn@latest add https://nessra-ui.vercel.app/r/breadcrumb.json` |
| pagination | registry:ui | Pagination with page navigation, next and previous links. | `npx shadcn@latest add https://nessra-ui.vercel.app/r/pagination.json` |
| table | registry:ui | A responsive table component for displaying data. | `npx shadcn@latest add https://nessra-ui.vercel.app/r/table.json` |
| tag-input | registry:ui | An input for entering multiple tags with keyboard support. | `npx shadcn@latest add https://nessra-ui.vercel.app/r/tag-input.json` |
| command | registry:ui | A command menu with search and keyboard navigation. | `npx shadcn@latest add https://nessra-ui.vercel.app/r/command.json` |
| copy-button | registry:ui | A button that copies text to the clipboard with visual feedback. | `npx shadcn@latest add https://nessra-ui.vercel.app/r/copy-button.json` |
| drawer | registry:ui | A drawer component for mobile-friendly navigation and content. | `npx shadcn@latest add https://nessra-ui.vercel.app/r/drawer.json` |
| calendar | registry:ui | A date field component that allows users to enter and edit date. | `npx shadcn@latest add https://nessra-ui.vercel.app/r/calendar.json` |
| date-picker | registry:ui | A date picker component with range and presets. | `npx shadcn@latest add https://nessra-ui.vercel.app/r/date-picker.json` |
| data-table | registry:ui | A powerful data table with sorting, filtering, pagination, row selection and faceted filters. | `npx shadcn@latest add https://nessra-ui.vercel.app/r/data-table.json` |
| spinner | registry:ui | A loading indicator for asynchronous operations. | `npx shadcn@latest add https://nessra-ui.vercel.app/r/spinner.json` |
| empty | registry:ui | Display an empty state when no data is available. | `npx shadcn@latest add https://nessra-ui.vercel.app/r/empty.json` |
| typography | registry:ui | Styled text components for headings, paragraphs, lists, and more. | `npx shadcn@latest add https://nessra-ui.vercel.app/r/typography.json` |
| toggle-group | registry:ui | A set of two-state buttons that can be toggled on or off. | `npx shadcn@latest add https://nessra-ui.vercel.app/r/toggle-group.json` |
| button-group | registry:ui | Groups related buttons together with consistent styling. | `npx shadcn@latest add https://nessra-ui.vercel.app/r/button-group.json` |
| field | registry:ui | Combine labels, controls, and help text to compose accessible form fields. | `npx shadcn@latest add https://nessra-ui.vercel.app/r/field.json` |
| input-group | registry:ui | Add addons, buttons, and helper content to inputs. | `npx shadcn@latest add https://nessra-ui.vercel.app/r/input-group.json` |
| combobox | registry:ui | An autocomplete input with a dropdown list of suggestions. | `npx shadcn@latest add https://nessra-ui.vercel.app/r/combobox.json` |
| sidebar | registry:ui | A composable, themeable and customizable sidebar component. | `npx shadcn@latest add https://nessra-ui.vercel.app/r/sidebar.json` |
| input-otp | registry:ui | Accessible one-time password input with copy/paste support. | `npx shadcn@latest add https://nessra-ui.vercel.app/r/input-otp.json` |
| number-input | registry:ui | A numeric input with increment and decrement buttons. | `npx shadcn@latest add https://nessra-ui.vercel.app/r/number-input.json` |
| chart | registry:ui | Beautiful and responsive charts built with Recharts. | `npx shadcn@latest add https://nessra-ui.vercel.app/r/chart.json` |
| stat-card | registry:ui | Display key metrics and KPIs with value, label, icon and trend indicator. | `npx shadcn@latest add https://nessra-ui.vercel.app/r/stat-card.json` |
| dashboard-stats | registry:block | A dashboard page with KPI stat cards, overview chart placeholder and recent sales list. | `npx shadcn@latest add https://nessra-ui.vercel.app/r/dashboard-stats.json` |
| signin-form | registry:block | A complete sign in page with email and password validation. | `npx shadcn@latest add https://nessra-ui.vercel.app/r/signin-form.json` |
| signup-form | registry:block | A complete signup page with name, email, password and confirmation. | `npx shadcn@latest add https://nessra-ui.vercel.app/r/signup-form.json` |
| forgot-password-form | registry:block | A forgot password page with email input and success state. | `npx shadcn@latest add https://nessra-ui.vercel.app/r/forgot-password-form.json` |
| reset-password-form | registry:block | A reset password page with new password and confirmation. | `npx shadcn@latest add https://nessra-ui.vercel.app/r/reset-password-form.json` |

## For AI agents

```text
You are adding components from @nessra-ui to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/nessra-ui.md) for the component list.
2. Fetch the machine-readable index: https://nessra-ui.vercel.app/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: nessra-ui).
```