--- name: "@nekode" slug: "nekode" description: "Composed ready to use shadcn components, just plug and play." category: "Animated components" tags: ["animation", "auth", "buttons", "forms", "media", "overlays", "tables"] framework: "react" license: "MIT" author: "rifkiahmadfahrezi" website: "https://ui.nekode.id" github: "https://github.com/rifkiahmadfahrezi/nekode-ui" registry: "https://ui.nekode.id/r/registry.json" pro: false pro_url: null github_stars: 0 component_count: 29 generated_at: "2026-10-10T06:32:55.998Z" --- # @nekode Composed ready to use shadcn components, just plug and play. ## Links - Website: https://ui.nekode.id - GitHub: https://github.com/rifkiahmadfahrezi/nekode-ui - Registry JSON: https://ui.nekode.id/r/registry.json - Directory page: https://sh4dcn.vercel.app/registry/nekode - This file: https://sh4dcn.vercel.app/md/nekode.md ## Install ```sh # add the whole registry (shadcn CLI) npx shadcn@latest add https://ui.nekode.id/r/registry.json pnpm dlx shadcn@latest add https://ui.nekode.id/r/registry.json bunx shadcn@latest add https://ui.nekode.id/r/registry.json # clone the source repo git clone https://github.com/rifkiahmadfahrezi/nekode-ui.git # fetch the raw registry index curl -s https://ui.nekode.id/r/registry.json ``` ## Components (29) | name | type | description | install | | --- | --- | --- | --- | | date | registry:lib | ISO date formatting/parsing helpers (yyyy-MM-dd, ISO strings) for UI display. | `npx shadcn@latest add https://ui.nekode.id/r/date.json` | | date-vanilla | registry:lib | Same date formatting/parsing helpers as date, implemented with native Date and Intl — no date-fns dependency. | `npx shadcn@latest add https://ui.nekode.id/r/date-vanilla.json` | | string | registry:lib | Common string helpers — capitalize, title case, slugify, truncate, pluralize, currency formatting, email/phone masking. | `npx shadcn@latest add https://ui.nekode.id/r/string.json` | | number | registry:lib | Common number helpers — clamp, range check, random int, number/currency/compact formatting. | `npx shadcn@latest add https://ui.nekode.id/r/number.json` | | text-field | registry:ui | A composed shadcn text input with field component | `npx shadcn@latest add https://ui.nekode.id/r/text-field.json` | | number-field | registry:ui | A composed shadcn number input with field component | `npx shadcn@latest add https://ui.nekode.id/r/number-field.json` | | textarea-field | registry:ui | A composed shadcn textarea input with field component | `npx shadcn@latest add https://ui.nekode.id/r/textarea-field.json` | | password-field | registry:ui | A composed shadcn password input with field component | `npx shadcn@latest add https://ui.nekode.id/r/password-field.json` | | select-field | registry:ui | A composed shadcn select with field component | `npx shadcn@latest add https://ui.nekode.id/r/select-field.json` | | date-picker-field | registry:ui | A labeled date picker built on Calendar and Popover with field layout. | `npx shadcn@latest add https://ui.nekode.id/r/date-picker-field.json` | | date-range-picker-field | registry:ui | A labeled date range picker built on Calendar and Popover with field layout. | `npx shadcn@latest add https://ui.nekode.id/r/date-range-picker-field.json` | | date-multi-picker-field | registry:ui | A labeled multi-date picker built on Calendar and Popover with field layout. | `npx shadcn@latest add https://ui.nekode.id/r/date-multi-picker-field.json` | | time-picker-field | registry:ui | A labeled time input supporting 12h (AM/PM) and 24h formats with field layout. | `npx shadcn@latest add https://ui.nekode.id/r/time-picker-field.json` | | combobox-field | registry:ui | A labeled combobox input built on Combobox with field layout. | `npx shadcn@latest add https://ui.nekode.id/r/combobox-field.json` | | combobox-multi-field | registry:ui | A labeled multi-select combobox with chips that stack or collapse into an overflow count. | `npx shadcn@latest add https://ui.nekode.id/r/combobox-multi-field.json` | | datatable | registry:ui | Advanced table component with sorting, selection, pagination, filtering, row expansion, and more. | `npx shadcn@latest add https://ui.nekode.id/r/datatable.json` | | dialog-modal | registry:ui | A controlled dialog wrapper with preset sizes, a scrollable body, and an optional non-closeable mode. | `npx shadcn@latest add https://ui.nekode.id/r/dialog-modal.json` | | marquee | registry:ui | Infinitely scrolls any content, text or images, horizontally or vertically. | `npx shadcn@latest add https://ui.nekode.id/r/marquee.json` | | number-ticker | registry:ui | Displays a number whose digits roll up or down when the value changes. | `npx shadcn@latest add https://ui.nekode.id/r/number-ticker.json` | | text-typer | registry:ui | Types a string out one character at a time with a blinking caret. | `npx shadcn@latest add https://ui.nekode.id/r/text-typer.json` | | file-field | registry:ui | A drag-and-drop file input with single/multiple selection, previews, and removable file list. | `npx shadcn@latest add https://ui.nekode.id/r/file-field.json` | | field-checkbox | registry:ui | A labeled checkbox and checkbox group with description/error support, optionally rendered as choice cards. | `npx shadcn@latest add https://ui.nekode.id/r/field-checkbox.json` | | field-radio | registry:ui | A labeled radio group with description/error support, optionally rendered as choice cards. | `npx shadcn@latest add https://ui.nekode.id/r/field-radio.json` | | field-switch | registry:ui | A labeled switch with description/error support, optionally rendered as a choice card. | `npx shadcn@latest add https://ui.nekode.id/r/field-switch.json` | | login-form | registry:block | Email and password sign-in form with validation. | `npx shadcn@latest add https://ui.nekode.id/r/login-form.json` | | register-form | registry:block | Sign-up form with name, email and password confirmation. | `npx shadcn@latest add https://ui.nekode.id/r/register-form.json` | | multi-step-register-form | registry:block | Three-step sign-up (account, profile, plan) with a step rail, per-step validation and success state. | `npx shadcn@latest add https://ui.nekode.id/r/multi-step-register-form.json` | | forgot-password-form | registry:block | Single-field form that requests a password reset link. | `npx shadcn@latest add https://ui.nekode.id/r/forgot-password-form.json` | | contact-form | registry:block | Contact form with name, email and a message with character count. | `npx shadcn@latest add https://ui.nekode.id/r/contact-form.json` | ## For AI agents ```text You are adding components from @nekode to a shadcn-compatible project. 1. Read this file (https://sh4dcn.vercel.app/md/nekode.md) for the component list. 2. Fetch the machine-readable index: https://ui.nekode.id/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: nekode). ```