ui-collections
Two collections of React components you copy into your project and own.
The same components, props and behaviour, in two finishes: glass and tide.
Tip: Ctrl + click (⌘ + click on a Mac) opens a link in a new tab.
The home page is a small sea. Tap the water to feed the hamsi; feed them too fast and a shark comes by.
Two finishes, one library
Both collections ship the same components. Each one styles itself through a small theme contract, so a fix or a new feature lands in every collection at once. Only the theme and the copy differ.
What's inside
148 pieces per collection:
| |
|---|
| 50 components | Buttons, fields, dialogs, menus, tables, carousels, date pickers, command palette, account menu, status text… |
| 22 animated | Dynamic Island, dock, fluid tabs, scroll text reveal, typewriter, tilt and spotlight cards, number ticker… |
| 56 blocks | Heroes, pricing, auth flows, blog, careers, changelog, FAQ, footers, error and maintenance pages… |
| 12 patterns · 7 charts | Filters, empty and loading states, area, bar, donut, funnel, heatmap and radial charts |
| Lumen template | A complete marketing site plus a 40-screen admin app with dashboards, mail, kanban, invoices and settings |
Built to be owned. CSS first, with Motion only where springs matter. Every interactive element has hover, press, focus and disabled states, keyboard support and accessible names. Reduced-motion settings calm animations down instead of switching them off.
Install a component
Every piece is a shadcn registry entry. Open it on the site and copy its install command:
npx shadcn@latest add https://ui-collections.vercel.app/r/glass/button.json
Swap glass for tide to get the other finish. The code lands in your project; change it however you like.
Run it locally
npm install
npm run dev
Open localhost:3001 for the home page, then /glass and /tide.
| Script | What it does |
|---|
npm run build | Builds the registry and the site for production |
npm run typecheck | Type-checks the project |
npm run lint | Lints the source |
npm run check:themes | Checks every theme defines every token |
Deploy
Import the repository into Vercel and keep the defaults; no settings or environment variables are needed. The collections live under /glass and /tide, so a free *.vercel.app address is enough.
With a domain and wildcard DNS, each collection can live on its own subdomain (glass.example.com). Set:
SITE_URL=https://example.com
NEXT_PUBLIC_ROUTING=subdomain
COLLECTION_ORIGIN=https://{id}.example.com
Project layout
src/
├─ registry/kit/ the installable source: ui, blocks, screens, dashboards, templates
├─ catalog/ metadata for every piece; drives the docs and the registry
├─ demos/ live previews and usage examples
├─ themes/ the theme contract and one stylesheet per collection
└─ app/main/ the home page
Contributor rules live in AGENTS.md.
Licence
MIT © Serkan Baykal. All images and video in public/media are original work, released under CC0.
