nextjs
Skills for Next.js developers covering bundle size reduction, Cache Components and Partial Prefetching adoption, and verifying runtime behavior in a running app after code edits.
6 skills143k
@vercelFrontend
Plugin
preline
Adds Preline UI components and blocks to HTML files through the Preline MCP server, and generates, previews, and validates Preline theme CSS. Built on Tailwind CSS.
Plugin Signal63/100Solid
maintained69
capable23
documented100
adopted81
Claude Code
$ npx -y skills add htmlstreamofficial/preline --agent claude-code
Codex
$ npx skills add htmlstreamofficial/preline -a codex
Cursor
$ npx skills add htmlstreamofficial/preline -a cursor
Gemini CLI
$ npx skills add htmlstreamofficial/preline -a gemini-cli
GitHub Copilot
$ npx skills add htmlstreamofficial/preline -a github-copilot
OpenCode
$ npx skills add htmlstreamofficial/preline -a opencode
Windsurf
$ npx skills add htmlstreamofficial/preline -a windsurf
Stats
6,523
Stars
413
Forks
Active
Maintenance
TypeScript
Language
Last commit
Created
What's inside
2 Skills
/preline-mcpAdd, integrate, or build Preline UI components and blocks into HTML files via the Preline MCP server. Use when the user mentions "preline", says "/preline", asks to add a UI component, or requests a Preline block (a ready-made page section) using Preline UI./theme-generatorGenerate, preview, save, or validate Preline theme CSS using the bundled local generator in this skill. Use when the user asks to create a new Preline theme, match a brand color, translate a mood into a theme, generate light and dark theme CSS, preview theme output without
README
Preline UI is an open-source Tailwind CSS UI component library for building modern websites and apps. It includes UI blocks, templates, plugins, a Figma design system, and more.
✨ About Preline
Preline helps teams build modern websites and web apps faster with reusable Tailwind CSS components, interactive headless Tailwind CSS plugins, Tailwind CSS templates, and production-ready Tailwind CSS examples. It is designed for developers who want flexible markup, scalable design systems, and polished UI patterns without rebuilding everything from scratch.
- 204 free Tailwind CSS blocks and sections
- 5 free Tailwind CSS templates
- 27 headless Tailwind CSS plugins
- Full documentation, Figma, themes, and agent skills
⚡ Getting Started
Start with any working Tailwind CSS project and make sure Node.js and npm are installed.
Install via npm
- Install
preline:
npm i preline
- Import the Preline CSS variants file into your Tailwind CSS file after the
tailwindcssimport:
@import "tailwindcss";
/* Preline UI */
@source "./node_modules/preline/dist/*.js";
@import "./node_modules/preline/variants.css";
/* Preline Themes */
@import "./themes/theme.css";
- Add the Preline JavaScript file near the end of your
<body>tag:
<script src="./node_modules/preline/dist/preline.js"></script>
For setup details, framework integration, and configuration guides, visit the Preline documentation.
🤖 Agent Skills
Preline UI includes Agent Skills for agentic coding tools such as Cursor, Claude Code, and Gemini CLI, making it easier to automate theme generation and UI workflows.
Install via CLI:
npx skills add htmlstreamofficial/preline
♿ Accessibility
Preline UI includes enterprise-grade accessibility built into its components, helping teams create more inclusive interfaces with accessible Tailwind CSS components, keyboard-friendly interactions, proper focus management, and stronger support for assistive technologies. Learn more in the dedicated Accessibility documentation.
🧩 Headless Tailwind CSS Plugins
Explore headless Tailwind CSS plugins for accessible UI behavior, interactions, forms, navigation, overlays, and productivity workflows.
| Category | Plugin Pages |
|---|---|
| Disclosure | Accordion, Collapse, Tree View |
| Navigations | Tabs, Scrollspy, Scroll Nav, Stepper |
| Overlays | Dropdown, Overlay, Tooltip |
| Forms | Select, ComboBox, Datepicker, Range Slider, Input Number, File Upload, Strong Password, Toggle Password, Toggle Count, Copy Markup, PIN Input, Textarea Auto Height |
| Miscellaneous | DataTable, Carousel, Layout Splitter, Remove Element, Theme Switch |
🧱 Tailwind CSS Components
Browse Tailwind CSS component docs across layout, base UI, forms, navigation, overlays, tables, and advanced integrations.
🎨 Templates and Examples
Explore free and premium layouts for landing pages, dashboards, SaaS apps, ecommerce stores, CMS products, portfolios, and more.
Free Tailwind CSS Templates
| Template | Template | Template | Template | Template |
|---|---|---|---|---|
| Agency | AI Chat | CMS | Coffee Shop | Personal |
Explore More
🚀 Preline Pro
Preline Pro extends the free library with premium UI for serious product teams and commercial apps. It includes 740 premium Tailwind CSS blocks and sections, 21 premium Tailwind CSS templates, and 207 pages for admin dashboards, SaaS products, ecommerce, CMS, CRM, analytics, finance, chat, startup, and marketing use cases.
Stars on GitHub
Momentum
- stars in total
- 6.5k
File tree
Similar plugins.
@vercelui
Helps you add, find, fix, style and compose shadcn UI components in your React project, with component docs and usage examples. It can also move a project from Radix UI primitives to Base UI.
2 skills127k
@shadcn-uielectron
electron: Build cross-platform desktop apps with JavaScript, HTML, and CSS.
5 skills124k
@electrontaste-skill
Gives coding agents a design direction, reference images and a browser check, so the websites and app screens they build look deliberate instead of like a generic template page.
1 skill107k
@leonxlnxQuestions about preline.
Install it with the command on its page. It includes preline-mcp, theme-generator. Its skills do not fire on their own yet. Free and open source.
- What is preline?
- htmlstreamofficial/preline is a plugin of skills that adds prebuilt UI components built on Tailwind CSS. Use it to add components and blocks to HTML files with preline-mcp, or to generate and validate Preline theme CSS with theme-generator.
- How do I install preline?
- Run these in Claude Code: npx -y skills add htmlstreamofficial/preline --agent claude-code. Then prompt normally.
- Does preline auto-invoke its skills?
- Not yet. It is indexed on Flowy as a plain plugin.
- Is preline free?
- Yes. Flowy is free and open source, with nothing gated. You can read every skill in full before you install.
- Which coding agents can use preline's skills?
- preline installs in Claude Code, and its skills also install in Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf with the skills CLI. Each skill's page has the install command. Flowy's auto-invocation, which fires a skill when your prompt matches, runs in Claude Code only.
Is this plugin yours?
Claim it with GitHubSubmit a pluginPromote it