---
name: "@optics"
slug: "optics"
description: "A comprehensive personal design system and component registry for Next.js and React apps, built on Base UI primitives (not Radix) with Tailwind CSS v4 and React 19. Provides 60+ components including Accordion through Tooltip, plus Grid, Guided Tour, Code Snippet, Code Block, Item, Kbd, Multi Select, Show More, Spinner, Star Rating, Theme Switcher, and Timezone. Also includes Web Interface Guidelines, SEO/Metadata utilities, a Biome config collection, Next.js configuration templates, and an MCP server plus llms.txt resource. Free and open source, shadcn CLI compatible. Use for: teams wanting a Base UI-backed alternative to Radix-based shadcn registries with broader tooling (guidelines, configs, MCP integration) bundled in."
category: "Design system"
tags: ["ai", "auth", "blocks", "buttons", "cards", "charts", "components", "dashboard", "design-system", "developer-tools", "forms", "hooks", "loaders", "media", "mobile", "navigation", "onboarding", "overlays", "tables", "theming"]
framework: "react"
license: "MIT"
author: "agusmayol"
website: "https://optics.agusmayol.com.ar"
github: "https://github.com/agusmayol/optics"
registry: "https://optics.agusmayol.com.ar/r/registry.json"
pro: false
pro_url: null
github_stars: 223
component_count: 79
generated_at: "2026-07-28T08:00:50.948Z"
---

# @optics

A comprehensive personal design system and component registry for Next.js and React apps, built on Base UI primitives (not Radix) with Tailwind CSS v4 and React 19. Provides 60+ components including Accordion through Tooltip, plus Grid, Guided Tour, Code Snippet, Code Block, Item, Kbd, Multi Select, Show More, Spinner, Star Rating, Theme Switcher, and Timezone. Also includes Web Interface Guidelines, SEO/Metadata utilities, a Biome config collection, Next.js configuration templates, and an MCP server plus llms.txt resource. Free and open source, shadcn CLI compatible. Use for: teams wanting a Base UI-backed alternative to Radix-based shadcn registries with broader tooling (guidelines, configs, MCP integration) bundled in.

## Links

- Website: https://optics.agusmayol.com.ar
- GitHub: https://github.com/agusmayol/optics
- Registry JSON: https://optics.agusmayol.com.ar/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/optics
- This file: https://sh4dcn.vercel.app/md/optics.md

## Install

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

## Components (79)

| name | type | description | install |
| --- | --- | --- | --- |
| accordion | registry:component | A vertically stacked set of interactive headings that each reveal a section of content. | `npx shadcn@latest add https://optics.agusmayol.com.ar/r/accordion.json` |
| alert-dialog | registry:component | A modal dialog that interrupts the user with important content and expects a response. | `npx shadcn@latest add https://optics.agusmayol.com.ar/r/alert-dialog.json` |
| alert | registry:component | Displays a callout for user attention. | `npx shadcn@latest add https://optics.agusmayol.com.ar/r/alert.json` |
| aspect-ratio | registry:component | Displays content within a desired ratio. | `npx shadcn@latest add https://optics.agusmayol.com.ar/r/aspect-ratio.json` |
| avatar | registry:component | An image element with a fallback for representing the user. | `npx shadcn@latest add https://optics.agusmayol.com.ar/r/avatar.json` |
| badge | registry:component | Displays a badge or a component that looks like a badge. | `npx shadcn@latest add https://optics.agusmayol.com.ar/r/badge.json` |
| breadcrumb | registry:component | Displays the path to the current resource using a hierarchy of links. | `npx shadcn@latest add https://optics.agusmayol.com.ar/r/breadcrumb.json` |
| button-group | registry:component | Groups buttons together with proper spacing and styling. | `npx shadcn@latest add https://optics.agusmayol.com.ar/r/button-group.json` |
| button | registry:component | Displays a button or a component that looks like a button. | `npx shadcn@latest add https://optics.agusmayol.com.ar/r/button.json` |
| calendar | registry:component | A date field component that allows users to enter and edit date. | `npx shadcn@latest add https://optics.agusmayol.com.ar/r/calendar.json` |
| card | registry:component | Displays a card with header, content, and footer. | `npx shadcn@latest add https://optics.agusmayol.com.ar/r/card.json` |
| carousel | registry:component | A carousel with motion and swipe built using Embla. | `npx shadcn@latest add https://optics.agusmayol.com.ar/r/carousel.json` |
| chart | registry:component | Beautiful charts built with Recharts. | `npx shadcn@latest add https://optics.agusmayol.com.ar/r/chart.json` |
| checkbox | registry:component | A control that allows the user to toggle between checked and unchecked states. | `npx shadcn@latest add https://optics.agusmayol.com.ar/r/checkbox.json` |
| code-block | registry:component | A syntax-highlighted code block component with copy functionality. | `npx shadcn@latest add https://optics.agusmayol.com.ar/r/code-block.json` |
| code-snippet | registry:component | A code snippet component with tabs and copy functionality. | `npx shadcn@latest add https://optics.agusmayol.com.ar/r/code-snippet.json` |
| collapsible | registry:component | An interactive component which expands/collapses a panel. | `npx shadcn@latest add https://optics.agusmayol.com.ar/r/collapsible.json` |
| command | registry:component | Fast, composable, unstyled command menu for React. | `npx shadcn@latest add https://optics.agusmayol.com.ar/r/command.json` |
| context-menu | registry:component | Displays a menu to the user triggered by a right click or a long press. | `npx shadcn@latest add https://optics.agusmayol.com.ar/r/context-menu.json` |
| data-table | registry:component | Powerful table and datagrid built with TanStack Table. | `npx shadcn@latest add https://optics.agusmayol.com.ar/r/data-table.json` |
| date-picker | registry:component | A date field component that allows users to enter and edit date. | `npx shadcn@latest add https://optics.agusmayol.com.ar/r/date-picker.json` |
| dialog | registry:component | A window overlaid on either the primary window or another dialog window. | `npx shadcn@latest add https://optics.agusmayol.com.ar/r/dialog.json` |
| drawer | registry:component | A drawer component built with Vaul. | `npx shadcn@latest add https://optics.agusmayol.com.ar/r/drawer.json` |
| dropdown-menu | registry:component | Displays a menu to the user — such as a set of actions or functions — triggered by a button. | `npx shadcn@latest add https://optics.agusmayol.com.ar/r/dropdown-menu.json` |
| empty | registry:component | Displays an empty state with optional illustration, title, and description. | `npx shadcn@latest add https://optics.agusmayol.com.ar/r/empty.json` |
| field | registry:component | A field component for grouping form elements with labels and descriptions. | `npx shadcn@latest add https://optics.agusmayol.com.ar/r/field.json` |
| form | registry:component | Builds forms with React Hook Form. | `npx shadcn@latest add https://optics.agusmayol.com.ar/r/form.json` |
| grid | registry:component | A flexible grid system component for layout. | `npx shadcn@latest add https://optics.agusmayol.com.ar/r/grid.json` |
| guided-tour | registry:component | A guided tour component for onboarding users. | `npx shadcn@latest add https://optics.agusmayol.com.ar/r/guided-tour.json` |
| hover-card | registry:component | For sighted users to preview content available behind a link. | `npx shadcn@latest add https://optics.agusmayol.com.ar/r/hover-card.json` |
| input-group | registry:component | Groups input fields with addons, buttons, and text. | `npx shadcn@latest add https://optics.agusmayol.com.ar/r/input-group.json` |
| input-otp | registry:component | Accessible one-time password component with copy paste support. | `npx shadcn@latest add https://optics.agusmayol.com.ar/r/input-otp.json` |
| input | registry:component | Displays a form input field or a component that looks like an input. | `npx shadcn@latest add https://optics.agusmayol.com.ar/r/input.json` |
| item | registry:component | A flexible item component for displaying content. | `npx shadcn@latest add https://optics.agusmayol.com.ar/r/item.json` |
| kbd | registry:component | Keyboard key component for displaying keyboard shortcuts. | `npx shadcn@latest add https://optics.agusmayol.com.ar/r/kbd.json` |
| label | registry:component | Renders an accessible label associated with controls. | `npx shadcn@latest add https://optics.agusmayol.com.ar/r/label.json` |
| menubar | registry:component | A visually persistent menu common in desktop applications. | `npx shadcn@latest add https://optics.agusmayol.com.ar/r/menubar.json` |
| multi-select | registry:component | A select component for allowing multiple selections. | `npx shadcn@latest add https://optics.agusmayol.com.ar/r/multi-select.json` |
| navigation-menu | registry:component | A collection of links for navigating websites. | `npx shadcn@latest add https://optics.agusmayol.com.ar/r/navigation-menu.json` |
| pagination | registry:component | Pagination with page navigation, next and previous links. | `npx shadcn@latest add https://optics.agusmayol.com.ar/r/pagination.json` |
| popover | registry:component | Displays rich content in a portal, triggered by a button. | `npx shadcn@latest add https://optics.agusmayol.com.ar/r/popover.json` |
| progress | registry:component | Displays an indicator showing the completion progress of a task. | `npx shadcn@latest add https://optics.agusmayol.com.ar/r/progress.json` |
| radio-group | registry:component | A set of checkable buttons—known as radio buttons. | `npx shadcn@latest add https://optics.agusmayol.com.ar/r/radio-group.json` |
| resizable | registry:component | Accessible resizable panel groups and layouts. | `npx shadcn@latest add https://optics.agusmayol.com.ar/r/resizable.json` |
| scroll-area | registry:component | Augments native scroll functionality for custom, cross-browser styling. | `npx shadcn@latest add https://optics.agusmayol.com.ar/r/scroll-area.json` |
| select | registry:component | Displays a list of options for the user to pick from. | `npx shadcn@latest add https://optics.agusmayol.com.ar/r/select.json` |
| separator | registry:component | Visually or semantically separates content. | `npx shadcn@latest add https://optics.agusmayol.com.ar/r/separator.json` |
| sheet | registry:component | Extends the Dialog component to display content that complements the main content. | `npx shadcn@latest add https://optics.agusmayol.com.ar/r/sheet.json` |
| show-more | registry:component | A component that shows/hides additional content with smooth animations. | `npx shadcn@latest add https://optics.agusmayol.com.ar/r/show-more.json` |
| sidebar | registry:component | A composable sidebar component with desktop and mobile support. | `npx shadcn@latest add https://optics.agusmayol.com.ar/r/sidebar.json` |
| skeleton | registry:component | Use to show a placeholder while content is loading. | `npx shadcn@latest add https://optics.agusmayol.com.ar/r/skeleton.json` |
| slider | registry:component | An input where the user selects a value from within a given range. | `npx shadcn@latest add https://optics.agusmayol.com.ar/r/slider.json` |
| sonner | registry:component | Toast component built with Sonner. | `npx shadcn@latest add https://optics.agusmayol.com.ar/r/sonner.json` |
| spinner | registry:component | An animated spinner component. | `npx shadcn@latest add https://optics.agusmayol.com.ar/r/spinner.json` |
| star-rating | registry:component | An interactive star rating component. | `npx shadcn@latest add https://optics.agusmayol.com.ar/r/star-rating.json` |
| switch | registry:component | A control that allows the user to toggle between checked and unchecked states. | `npx shadcn@latest add https://optics.agusmayol.com.ar/r/switch.json` |
| table | registry:component | A responsive table component. | `npx shadcn@latest add https://optics.agusmayol.com.ar/r/table.json` |
| tabs | registry:component | A set of layered sections of content—known as tab panels. | `npx shadcn@latest add https://optics.agusmayol.com.ar/r/tabs.json` |
| textarea | registry:component | Displays a form textarea field or a component that looks like a textarea. | `npx shadcn@latest add https://optics.agusmayol.com.ar/r/textarea.json` |
| theme-switcher | registry:component | A theme switcher component for toggling between themes. | `npx shadcn@latest add https://optics.agusmayol.com.ar/r/theme-switcher.json` |
| timezone | registry:component | A component for displaying and converting timezones. | `npx shadcn@latest add https://optics.agusmayol.com.ar/r/timezone.json` |
| toggle-group | registry:component | A set of two-state buttons that can be toggled on or off. | `npx shadcn@latest add https://optics.agusmayol.com.ar/r/toggle-group.json` |
| toggle | registry:component | A two-state button that can be either on or off. | `npx shadcn@latest add https://optics.agusmayol.com.ar/r/toggle.json` |
| tooltip | registry:component | A popup that displays information related to an element. | `npx shadcn@latest add https://optics.agusmayol.com.ar/r/tooltip.json` |
| get-strict-context | registry:lib | Library utility: get-strict-context | `npx shadcn@latest add https://optics.agusmayol.com.ar/r/get-strict-context.json` |
| use-controlled-state | registry:lib | Hook utility: use-controlled-state | `npx shadcn@latest add https://optics.agusmayol.com.ar/r/use-controlled-state.json` |
| utils | registry:lib | Library utility: utils | `npx shadcn@latest add https://optics.agusmayol.com.ar/r/utils.json` |
| use-auto-height | registry:lib | Hook utility: use-auto-height | `npx shadcn@latest add https://optics.agusmayol.com.ar/r/use-auto-height.json` |
| use-has-primary-touch | registry:lib | Hook utility: use-has-primary-touch | `npx shadcn@latest add https://optics.agusmayol.com.ar/r/use-has-primary-touch.json` |
| highlight | registry:component | Highlight effect component for tabs and other interactive elements. | `npx shadcn@latest add https://optics.agusmayol.com.ar/r/highlight.json` |
| auto-height | registry:component | Auto height component for dynamic height animations. | `npx shadcn@latest add https://optics.agusmayol.com.ar/r/auto-height.json` |
| slot | registry:component | Slot component for motion animations. | `npx shadcn@latest add https://optics.agusmayol.com.ar/r/slot.json` |
| cursor-rule-back-end | registry:file | Cursor rule file for back-end development guidelines. | `npx shadcn@latest add https://optics.agusmayol.com.ar/r/cursor-rule-back-end.json` |
| cursor-rule-bulk-processing | registry:file | Cursor rule file for bulk processing guidelines. | `npx shadcn@latest add https://optics.agusmayol.com.ar/r/cursor-rule-bulk-processing.json` |
| cursor-rule-commits-convention | registry:file | Cursor rule file for commit conventions. | `npx shadcn@latest add https://optics.agusmayol.com.ar/r/cursor-rule-commits-convention.json` |
| cursor-rule-front-end | registry:file | Cursor rule file for front-end development guidelines. | `npx shadcn@latest add https://optics.agusmayol.com.ar/r/cursor-rule-front-end.json` |
| cursor-rule-general | registry:file | Cursor rule file for general development guidelines. | `npx shadcn@latest add https://optics.agusmayol.com.ar/r/cursor-rule-general.json` |
| cursor-rule-react-optimization | registry:file | Cursor rule file for React optimization guidelines. | `npx shadcn@latest add https://optics.agusmayol.com.ar/r/cursor-rule-react-optimization.json` |
| cursor-rule-web-interface-guidelines | registry:file | Cursor rule file for web interface guidelines. | `npx shadcn@latest add https://optics.agusmayol.com.ar/r/cursor-rule-web-interface-guidelines.json` |

## For AI agents

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