Make any model
ship pro-grade work
Pick components, copy prompts, add Skills, and your model delivers to a professional standard.
Trending today
The most saved components today
New picks
The best components of the past month
Categories
Heroes that move
Animated heroes and backgrounds, the most copied
UI you can ship
Inputs, feedback and navigation, ready to drop in
Requirements:
1. Keep the structure, motion and interactions; animate only transform and opacity
2. Wire colors to the project theme, with dark and light support
3. In a React project, rewrite it as HoverPreview.tsx and show it once on the home page
HoverPreview, and put a demo on the home page.What should we do in acme-website ?
src/components/BorderBeamCard.tsxsrc/pages/Index.tsx+ export function BorderBeamCard({ children }: Props) {+ return <div className="beam">{children}</div>− <PlanCard />+ <BorderBeamCard><Plan /></BorderBeamCard>
Works with the models and tools you already use.One prompt, from command-line agents to editors. Copy it once, use it anywhere.
Compatible third-party products. Trademarks belong to their owners and do not imply use or endorsement of 8pt.
More than components
Page templates, themes, Skills and icons, all from one design system
contact lens marketSample output
| Brand | Diameter | Wear cycle |
|---|---|---|
| Brand A | 14.2 | Daily |
| Brand B | 14.5 | Monthly |
Delivered your way
Real source code, kept where you can find it, installed from where you write code
Paste the prompt in your terminal and the source lands in your repo
Submit the same prompt as a task and get back changes you can review
Search and insert components with 8pt MCP without leaving your editor
<button class="x-shim" type="button"> <span class="x-shim__glow" aria-hidden="true"></span> <span class="x-shim__label">Start building <i aria-hidden="true">→</i></span> </button>
Real source code, ready to edit
Plain HTML, CSS and JS with no black-box dependencies. Every prompt ships with the full source, and the model rewrites it for your stack
Save it, find it again in one click
Collect components, templates and Skills in your own lists, grouped by project
Other tools
into one page
Before you start
Ask first
Browse and search every component, template and Skill and open any of them in a live preview; open-source Skills can be read in full. Copying prompts, install commands and MCP need the Builder plan.
Click Copy prompt and paste it into Claude Code, Cursor, Codex, Trae or any other tool; the model writes the component into your code using your stack and theme. Builder members who connect 8pt MCP can just describe what they need in the editor and the model fetches the components itself.
No. The prompt tells the model to wire colors, fonts and spacing to your project’s own design tokens; the component only brings structure and motion. Pair it with a theme and a Skill and the same component looks completely different from one project to the next.
$9/mo, $25/quarter or $75/year. Includes 8pt MCP, unlimited copies and installs, and every Skill. Renews automatically by card.
Components are plain HTML, CSS and JavaScript and prompts are plain text, so any model can use them; the model rewrites them in React, Vue or whatever framework you use. 8pt MCP works with Claude Code, Cursor, Trae, Codex and any other client that supports MCP.