Accessible parts.Plain code.
Set up a component without writing code, test the exact files you will export, then take them into your project as React + Tailwind or HTML/CSS/JS. No library to install.
- parts in stock
- 27parts in stock
- outputs each
- 2outputs each
- runtime dependencies
- 0runtime dependencies
Parts catalogue
Every part in the catalogue is in stock, and every one of them is tested on both outputs.
Date picker
One date or a range, typed in your format, with month and year views and earliest/latest dates.
Pattern: APG Date Picker Dialog
Configure and test
Modal
Centred dialog or bottom sheet. Focus stays inside, Escape closes, motion respects reduced-motion settings.
Pattern: APG Dialog (Modal)
Configure and test
Searchable select
Type to filter a long list, pick with the keyboard or the mouse, with matches highlighted.
Pattern: APG Combobox
Configure and test
Form with validation
Your rules, and error messages that say what went wrong and how to fix it.
Pattern: Native form + error summary
Configure and test
Site header
Logo, links, call to action and a mobile menu that behaves.
Pattern: APG Disclosure navigation
Configure and test
Tabs
One area, several panels. Arrow keys move between tabs, in a row or down the side.
Pattern: APG Tabs
Configure and test
Basket
Lines, quantities, removing, delivery and totals, as a panel or a drawer.
Pattern: Native dialog + live totals
Configure and test
Carousel
A row of slides that scrolls, swipes and steps, with dots, a counter and optional rotation.
Pattern: APG Carousel
Configure and test
Mega menu
Several columns of links under one heading, opened by click or hover, closed by Escape.
Pattern: APG Disclosure navigation
Configure and test
Site footer
Brand, links, social profiles and the legal line. Plain HTML, no JavaScript.
Pattern: Landmark contentinfo
Configure and test
CTA section
Heading, supporting text and actions. Plain HTML, no JavaScript.
Pattern: Landmark section
Configure and test
Accordion
Sections that open one at a time, or all at once, with the content in the page from the start.
Pattern: APG Accordion
Configure and test
Tooltip
A short note on a control, opened by hover and by keyboard focus, closed by Escape.
Pattern: APG Tooltip
Configure and test
Dropdown menu
A button that opens a list of actions: arrow keys, type to jump, Escape to close.
Pattern: APG Menu Button
Configure and test
Popover
An anchored panel you can use: focus moves in, Escape closes it and comes back out.
Pattern: Anchored dialog
Configure and test
Notifications
Messages that appear, announce themselves, pause while you read and clear themselves.
Pattern: ARIA live region
Configure and test
Data table
Rows that sort by value, select by row and stack into cards on a phone.
Pattern: HTML table + aria-sort
Configure and test
Pagination
Numbered pages with gaps, previous and next, as links or as buttons.
Pattern: Navigation + aria-current
Configure and test
Breadcrumbs
The trail back up the site, collapsing to first and current on a phone. No JavaScript.
Pattern: Navigation + aria-current
Configure and test
Stepper
Where you are in a multi-step flow, with each state said in words. No JavaScript.
Pattern: Navigation + aria-current=step
Configure and test
Sidebar navigation
Sections of links with the current page marked, folding into a drawer on a phone.
Pattern: Navigation + disclosure
Configure and test
File upload
Choose or drop files, with the kind and size checked and every change announced.
Pattern: File input + drop area
Configure and test
Multi-select
Pick several from a long list, with each choice removable and every change announced.
Pattern: APG Combobox, multi-select
Configure and test
Password field
Rules read with the field, strength said in words, and a show button that says its state.
Pattern: Labelled input + live rules
Configure and test
One-time code
Boxes that fill as you type, take a pasted code whole, and say when the code is complete.
Pattern: Grouped inputs + one-time-code
Configure and test
Range slider
One value or a range, on native range inputs that keep their keyboard and announce their unit.
Pattern: Native range inputs
Configure and test
Global search
Point it at any data, nested or flat, and search it from anywhere with ⌘K.
Pattern: APG Combobox in a dialog
Configure and test
From this page to your project
Configure
Content, behaviour, add-ons and style, each in its own tab, with a search to find any option.
Content · Behaviour · Add-ons · Style
Test
Run the exported code, not a mock-up. Switch output and screen width, and follow the keyboard map.
React + Tailwind · HTML/CSS/JS · Phone · Tablet · Desktop
Take it home
Copy the files, or install them with one shadcn command. The code is yours, with no library behind it.
npx shadcn@latest add …/r/date-picker.json
Test report
What every part in stock is checked against, on every exported output. Automated tests cannot judge what a screen reader says, so each part has a manual checklist on its own page.
| Check | What it proves | Result |
|---|---|---|
| axe accessibility rulesWCAG 2.0, 2.1 and 2.2, levels A and AA, with the component closed and open. | WCAG 2.0, 2.1 and 2.2, levels A and AA, with the component closed and open. | Pass |
| Keyboard onlyOpen, move, pick and close without a mouse. Focus goes back where it came from. | Open, move, pick and close without a mouse. Focus goes back where it came from. | Pass |
| Focus stays insideTab and Shift+Tab wrap inside dialogs instead of escaping to the page behind. | Tab and Shift+Tab wrap inside dialogs instead of escaping to the page behind. | Pass |
| Both outputsThe same tests run on the React + Tailwind file and the HTML/CSS/JS files. | The same tests run on the React + Tailwind file and the HTML/CSS/JS files. | Pass |
| BrowsersChromium, WebKit (the Safari engine) and an emulated iPhone 15. | Chromium, WebKit (the Safari engine) and an emulated iPhone 15. | Pass |
| Install by URLThe registry serves exactly the file you would copy, with your options applied. | The registry serves exactly the file you would copy, with your options applied. | Pass |