Does preline auto-invoke its skills?

Not yet. It is indexed on Flowy as a plain plugin. Request auto-invocation on its page and Flowy will route its skills for you as you prompt.

Yes. Flowy is free and open source, with nothing gated. You can read every skill in full before you install.

Development

Plugin

preline

Preline UI is an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework.

FLOW.md

htmlstreamofficial@htmlstreamofficial

GitHub

Plugin Signal56/100Fair

maintained56

capable14

documented100

adopted81

Install

$ npx -y skills add htmlstreamofficial/preline --agent claude-code

Run the curl in your terminal, the rest in Claude Code.

Stats

JavaScript Node Tailwind HTML CSS

+5 tags

Bash GitHub Anthropic Gemini Figma

6,379

Stars

414

Forks

Maintained

Maintenance

HTML

Language

3mo ago

Last commit

4y ago

Created

Repo: htmlstreamofficial/preline

In this plugin

1 skill

- theme-generator

See everything inside

What's inside

Skills

/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

Badges

README

Read on GitHub

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.

⚡ 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 tailwindcss import:

@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.

Category	Component Pages
Layout & Content	Container, Columns, Grid, Layout Splitter, Typography, Images, Links, Dividers & HR, KBD, Custom Scrollbar
Base Components	Accordion, Alerts, Avatar, Avatar Group, Badge, Blockquote, Buttons, Button Group, Card, Chat Bubbles, Carousel, Collapse, Datepicker, Devices, Lists, List Group, Legend Indicator, Progress, File Uploading Progress, Ratings, Skeleton, Spinners, Styled Icons, Toasts, Timeline, Tree View
Navigations	Navbar, Mega Menu, Navs, Tabs, Sidebar, Scrollspy, Breadcrumb, Pagination, Stepper
Basic Forms	Input, Input Group, Textarea, File Input, Checkbox, Radio, Switch, Select, Range Slider, Color Picker, Time Picker
Advanced Forms	Advanced Select, ComboBox, SearchBox, Input Number, Strong Password, Toggle Password, Toggle Count, Copy Markup, PIN Input
Overlays	Dropdown, Context Menu, Modal, Offcanvas, Popover, Tooltip
Tables	Tables
Third-Party Plugins	Advanced Range Slider, Advanced Datepicker, Charts, Clipboard, Confetti Animation, Datamaps, Datatables, Drag and Drop, File Upload, Maps, Toast Notifications, WYSIWYG Editor

🎨 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.

📚 Documentation and Resources

🤝 Community

For help, best practices, and product discussions, use GitHub Discussions.

Follow Preline UI on X (Twitter) for the latest updates.

📄 License

The Preline UI Figma resources are also available for personal and commercial use. All brand icons are trademarks of their respective owners, and their use does not imply endorsement.

A Product of Htmlstream

Preline UI is built by the Htmlstream team, crafting UI components and templates since 2013—helping teams ship faster with scalable, flexible design systems for real-world products.

Share your thoughts about Preline UI on X (Twitter).

File tree

374

htmlstreamofficial/prelineView on GitHub

.github/
  ISSUE_TEMPLATE/
    bug_report.yml
    config.yml
    feature_request.yml
.gitignore
css/
  themes/
    autumn.css
    bubblegum.css
    cashmere.css
    harvest.css
    moon.css
    ocean.css
    olive.css
    retro.css
    theme.css
dist/
  accessibility-manager.d.ts
  accordion-non-auto.js
  accordion-non-auto.mjs
  accordion.d.ts
  accordion.js
  accordion.mjs
  carousel-non-auto.js
  carousel-non-auto.mjs
  carousel.d.ts
  carousel.js
  carousel.mjs
  collapse-non-auto.js
  collapse-non-auto.mjs
  collapse.d.ts
  collapse.js
  collapse.mjs
  combobox-non-auto.js
  combobox-non-auto.mjs
  combobox.d.ts
  combobox.js
  combobox.mjs
  copy-markup-non-auto.js
  copy-markup-non-auto.mjs
  copy-markup.d.ts
  copy-markup.js
  copy-markup.mjs
  datatable-non-auto.js
  datatable-non-auto.mjs
  datatable.d.ts
  datatable.js
  datatable.mjs
  datepicker-non-auto.js
  datepicker-non-auto.mjs
  datepicker.d.ts
  datepicker.js
  datepicker.mjs
  dropdown-non-auto.js
  dropdown-non-auto.mjs
  dropdown.d.ts
  dropdown.js
  dropdown.mjs
  file-upload-non-auto.js
  file-upload-non-auto.mjs
  file-upload.d.ts
  file-upload.js
  file-upload.mjs
  helper-apexcharts.d.ts
  helper-apexcharts.js
  helper-apexcharts.mjs
  helper-clipboard.d.ts
  helper-clipboard.js
  helper-clipboard.mjs
  helper-shared.d.ts
  helper-shared.js
  helper-shared.mjs
  index.d.ts
  index.js
  index.mjs
  input-number-non-auto.js
  input-number-non-auto.mjs
  input-number.d.ts
  input-number.js
  input-number.mjs
  layout-splitter-non-auto.js
  layout-splitter-non-auto.mjs
  layout-splitter.d.ts
  layout-splitter.js
  layout-splitter.mjs
  non-auto.d.ts
  non-auto.js
  non-auto.mjs
  overlay-non-auto.js
  overlay-non-auto.mjs
  overlay.d.ts
  overlay.js
  overlay.mjs
  pin-input-non-auto.js
  pin-input-non-auto.mjs
  pin-input.d.ts
  pin-input.js
  pin-input.mjs
  preline.d.ts
  preline.js
  range-slider-non-auto.js
  range-slider-non-auto.mjs
  range-slider.d.ts
  range-slider.js
  range-slider.mjs
  remove-element-non-auto.js
  remove-element-non-auto.mjs
  remove-element.d.ts
  remove-element.js
  remove-element.mjs
  scroll-nav-non-auto.js
  scroll-nav-non-auto.mjs
  scroll-nav.d.ts
  scroll-nav.js
  scroll-nav.mjs
  scrollspy-non-auto.js
  scrollspy-non-auto.mjs
  scrollspy.d.ts
  scrollspy.js
  scrollspy.mjs
  select-non-auto.js
  select-non-auto.mjs
  select.d.ts
  select.js
  select.mjs
  stepper-non-auto.js
  stepper-non-auto.mjs
  stepper.d.ts
  stepper.js
  stepper.mjs
  strong-password-non-auto.js
  strong-password-non-auto.mjs
  strong-password.d.ts
  strong-password.js
  strong-password.mjs
  tabs-non-auto.js
  tabs-non-auto.mjs
  tabs.d.ts
  tabs.js
  tabs.mjs
  textarea-auto-height-non-auto.js
  textarea-auto-height-non-auto.mjs
  textarea-auto-height.d.ts
  textarea-auto-height.js
  textarea-auto-height.mjs
  theme-switch-non-auto.js
  theme-switch-non-auto.mjs
  theme-switch.d.ts
  theme-switch.js
  theme-switch.mjs
  toggle-count-non-auto.js
  toggle-count-non-auto.mjs
  toggle-count.d.ts
  toggle-count.js
  toggle-count.mjs
  toggle-password-non-auto.js
  toggle-password-non-auto.mjs
  toggle-password.d.ts
  toggle-password.js
  toggle-password.mjs
  tooltip-non-auto.js
  tooltip-non-auto.mjs
  tooltip.d.ts
  tooltip.js
  tooltip.mjs
  tree-view-non-auto.js
  tree-view-non-auto.mjs
  tree-view.d.ts
  tree-view.js
  tree-view.mjs
  utils.d.ts
  utils.js
  utils.mjs
dts-config.js
global.d.ts
index.d.ts
index.js
LICENSE
package-lock.json
package.json
preline.d.ts
preline.js
prettier.config.js
README.md
scripts/
  flatten-dts.js
skills/
  theme-generator/
    docs/
      final-output-style.md
      palette-guidance.md
      step-1.md
      step-2.md
      step-3.md
      step-4.md
      step-5.md
      step-6.md
      step-7.md
      token-reference.md
      validation-checklist.md
      workflow.md
    examples.md
    output_template.md
    qa.md
    scripts/
      example-config.json
      example-config.yaml
      find-themes-dir.js
      generate-theme.js
      run-theme-generator.js
    SKILL.md
src/
  auto/
    index.ts
    static-methods.ts
    types.ts
  constants.ts
  globals.ts
  helpers/
    apexcharts/
      index.ts
      interfaces.ts
    clipboard/
      index.ts
    shared/
      index.ts
    types.ts
  index.ts
  interfaces.ts
  plugins/
    accessibility-manager/
      index.ts
      interfaces.ts
    accordion/
      auto.ts
      core.ts
      interfaces.ts
      README.md
      variants.css
    base-plugin/
      index.ts
      interfaces.ts
    carousel/
      auto.ts
      core.ts
      interfaces.ts
      README.md
      types.ts
      variants.css
    collapse/
      auto.ts
      core.ts
      interfaces.ts
      README.md
      variants.css
    combobox/
      auto.ts
      core.ts
      interfaces.ts
      README.md
      variants.css
    copy-markup/
      auto.ts
      core.ts
      interfaces.ts
      README.md
    datatable/
      auto.ts
      core.ts
      interfaces.ts
      README.md
      variants.css
    datepicker/
      auto.ts
      core.ts
      interfaces.ts
      locale.ts
      README.md
      styles-utility.css
      styles.css
      templates-utility.ts
      templates.ts
      types.ts
      vanilla-calendar-pro.d.ts
      vanilla-datepicker-pro.ts
      variants.css
    dropdown/
      auto.ts
      core.ts
      interfaces.ts
      README.md
      variants.css
    file-upload/
      auto.ts
      core.ts
      interfaces.ts
      README.md
      variants.css
    input-number/
      auto.ts
      core.ts
      interfaces.ts
      README.md
      variants.css
    layout-splitter/
      auto.ts
      core.ts
      interfaces.ts
      README.md
      variants.css
    overlay/
      auto.ts
      core.ts
      interfaces.ts
      README.md
      types.ts
      variants.css
    pin-input/
      auto.ts
      core.ts
      interfaces.ts
      README.md
      variants.css
    range-slider/
      auto.ts
      core.ts
      interfaces.ts
      README.md
      types.ts
      variants.css
    remove-element/
      auto.ts
      core.ts
      interfaces.ts
      README.md
      variants.css
    scroll-nav/
      auto.ts
      core.ts
      interfaces.ts
      README.md
      variants.css
    scrollspy/
      auto.ts
      core.ts
      interfaces.ts
      README.md
      variants.css
    select/
      auto.ts
      core.ts
      interfaces.ts
      README.md
      variants.css
    stepper/
      auto.ts
      core.ts
      interfaces.ts
      README.md
      variants.css
    strong-password/
      auto.ts
      core.ts
      interfaces.ts
      README.md
      variants.css
    tabs/
      auto.ts
      core.ts
      interfaces.ts
      README.md
      variants.css
    textarea-auto-height/
      auto.ts
      core.ts
      interfaces.ts
      README.md
    theme-switch/
      auto.ts
      core.ts
      interfaces.ts
      README.md
      variants.css
    toggle-count/
      auto.ts
      core.ts
      interfaces.ts
      README.md
    toggle-password/
      auto.ts
      core.ts
      interfaces.ts
      README.md
    tooltip/
      auto.ts
      core.ts
      interfaces.ts
      README.md
      types.ts
... 27 more

FAQ

preline is a Claude Code plugin with 1 hand-picked skill for development work, indexed on Flowy. Install it with the command on its page. It includes theme-generator. Its skills do not fire on their own yet. Request auto-invocation to have Flowy route them as you prompt. Free and open source.

What is preline?: Preline UI is an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework.
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. Request auto-invocation on its page and Flowy will route its skills for you as you prompt.
Is preline free?: Yes. Flowy is free and open source, with nothing gated. You can read every skill in full before you install.