PatternFly Svelte
A Svelte component library implementing PatternFly design system components.
Installation
npm install @patternfly/svelte @patternfly/patternfly
After cloning this repository for development, generate the Web Component wrappers:
npm install
npm run wc:gen
Usage
Web Components
This library can be consumed as native Web Components without Svelte.
- Build the web components bundle:
npm run wc:gen
npm run build:webcomponents
- Use it in any HTML page (UMD):
<link rel="stylesheet" href="https://unpkg.com/@patternfly/patternfly@^6/patternfly.css" />
<link rel="stylesheet" href="https://unpkg.com/@patternfly/patternfly@^6/patternfly-addons.css" />
<script src="./node_modules/@patternfly/svelte/dist/webcomponents/webcomponents.umd.cjs"></script>
<pf-alert variant="success" title="It worked!">
Hello from Web Components
</pf-alert>
<pf-badge>99+</pf-badge>
<pf-button variant="primary">Click me</pf-button>
- Or import the ESM bundle:
<script type="module">
import '@patternfly/svelte/dist/webcomponents/webcomponents.js';
// Custom elements are now registered (e.g., <pf-alert/>)
</script>
All top-level components are exposed as pf-<kebab-case-name> custom elements (e.g., pf-alert, pf-badge, pf-button, pf-table).
Notes:
- The build logs may include Svelte warnings about
$props()inference in some internal components when compiling as custom elements. These are non-fatal and do not affect usage of the generated Web Components. - If you add new components, run
npm run wc:gento scaffold their.wc.sveltewrappers and updatesrc/webcomponents.ts.
<script>
import { Button } from '@patternfly/svelte';
import '@patternfly/svelte/styles.css';
</script>
<Button variant="primary">Click me</Button>
Components
š View the Storybook for live examples and documentation.
The following PatternFly components are available:
| Component | PatternFly Docs |
|---|---|
| Accordion | Docs |
| Action List | Docs |
| Alert | Docs |
| Avatar | Docs |
| Badge | Docs |
| Banner | Docs |
| Brand | Docs |
| Breadcrumb | Docs |
| Button | Docs |
| Calendar Month | Docs |
| Card | Docs |
| Checkbox | Docs |
| Clipboard Copy | Docs |
| Code Block | Docs |
| Content | Docs |
| Data List | Docs |
| Date Picker | Docs |
| Date Time Picker | Docs |
| Description List | Docs |
| Drawer | Docs |
| Dropdown | Docs |
| Dual List Selector | Docs |
| Empty State | Docs |
| Expandable Section | Docs |
| Form | Docs |
| Form Select | Docs |
| Helper Text | Docs |
| Hint | Docs |
| Icon | Docs |
| Input Group | Docs |
| Jump Links | Docs |
| Label | Docs |
| List | Docs |
| Masthead | Docs |
| Menu | Docs |
| Menu Toggle | Docs |
| Modal | Docs |
| Multiple File Upload | Docs |
| Navigation | Docs |
| Notification Badge | Docs |
| Notification Drawer | Docs |
| Number Input | Docs |
| Options Menu | Docs |
| Overflow Menu | Docs |
| Page | Docs |
| Pagination | Docs |
| Panel | Docs |
| Popover | Docs |
| Progress | Docs |
| Progress Stepper | Docs |
| Radio | Docs |
| Search Input | Docs |
| Select | Docs |
| Sidebar | Docs |
| Simple File Upload | Docs |
| Simple List | Docs |
| Skeleton | Docs |
| Slider | Docs |
| Spinner | Docs |
| Switch | Docs |
| Table | Docs |
| Tabs | Docs |
| Text Area | Docs |
| Text Input | Docs |
| Text Input Group | Docs |
| Time Picker | Docs |
| Timestamp | Docs |
| Title | Docs |
| Toggle Group | Docs |
| Toolbar | Docs |
| Tree View | Docs |
| Truncate | Docs |
| Wizard | Docs |
Development
Setup
npm install
For development run storybook
npm run storybook
Build
npm run build
Testing
# Run tests
npm test
# Run tests with UI
npm run test:ui
# Run tests with coverage
npm run test:coverage
Storybook
# Start Storybook
npm run storybook
# Build Storybook
npm run build-storybook
License
MIT
