sh4dcn
Registries
ActiveFeaturedDesign system223

@optics

Design system · MIT · data updated 2026-07-28

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.

WebsiteDocsGitHubComponents folderAgent brief (.md)
@optics preview
aiauthblocksbuttonscardschartscomponentsdashboarddesign-systemdeveloper-toolsformshooksloadersmediamobilenavigationonboardingoverlaystablestheming

Install

npx shadcn@latest add https://optics.agusmayol.com.ar/r/registry.json

Health

StatusActive
Last commit3 months ago
LicenseMIT
Open issues3
ArchivedNo
Stars223

Components (79)

accordionalert-dialogalertaspect-ratioavatarbadgebreadcrumbbutton-groupbuttoncalendarcardcarouselchartcheckboxcode-blockcode-snippetcollapsiblecommandcontext-menudata-tabledate-pickerdialogdrawerdropdown-menuemptyfieldformgridguided-tourhover-cardinput-groupinput-otpinputitemkbdlabelmenubarmulti-selectnavigation-menupaginationpopoverprogressradio-groupresizablescroll-areaselectseparatorsheetshow-moresidebarskeletonslidersonnerspinnerstar-ratingswitchtabletabstextareatheme-switcher
Components: accordion, alert-dialog, alert, aspect-ratio, avatar, badge, breadcrumb, button-group, button, calendar, card, carousel, chart, checkbox, code-block, code-snippet, collapsible, command, context-menu, data-table, date-picker, dialog, drawer, dropdown-menu, empty, field, form, grid, guided-tour, hover-card, input-group, input-otp, input, item, kbd, label, menubar, multi-select, navigation-menu, pagination, popover, progress, radio-group, resizable, scroll-area, select, separator, sheet, show-more, sidebar, skeleton, slider, sonner, spinner, star-rating, switch, table, tabs, textarea, theme-switcher, timezone, toggle-group, toggle, tooltip, get-strict-context, use-controlled-state, utils, use-auto-height, use-has-primary-touch, highlight, auto-height, slot, cursor-rule-back-end, cursor-rule-bulk-processing, cursor-rule-commits-convention, cursor-rule-front-end, cursor-rule-general, cursor-rule-react-optimization, cursor-rule-web-interface-guidelines

Preview

Live sandbox previews render component source client-side. Where a component can’t be rendered standalone, sh4dcn falls back to its source and install command.

@optics · accordion

npx shadcn@latest add https://optics.agusmayol.com.ar/r/accordion.json
View source