All work
Open source
Accessible component library - neelam-ui
A published React component library of 47 accessible components, built to the WAI-ARIA Authoring Practices Guide and shipped to npm as neelam-ui. It lives in a monorepo alongside its own documentation site at neelamui.com — a Next.js App Router build with MDX pages, generated prop tables and a gallery of whole-screen blocks — with unit, accessibility and axe-core story testing enforced in CI and releases published through npm trusted publishing.
- TypeScript
- React 19
- Tailwind CSS 4
- Next.js 15
- Storybook 10
- Vitest
- tsup
By the numbers
- 47
- Components published
- each with stories and tests
- 208
- Stories swept by axe
- in a real browser, every push
- 48
- Test files
- Vitest, RTL and jest-axe
- 8
- Blocks
- whole screens built from the library
Key features
- 47 components
- From primitives (Button, Input, Checkbox) to composite widgets (Dialog, Combobox, Command palette, DataTable, Carousel, Calendar, Sidebar, Resizable) and data display (Chart, Sparkline, StatCard), each with its own Storybook stories and test suite.
- Accessibility as the design constraint
- Every interactive component implements the WAI-ARIA APG pattern for its widget type: correct roles and ARIA relationships, full keyboard support, and managed focus.
- Native platform first
- Dialog is a real <dialog> driven by showModal(), so the focus trap, Escape-to-close, and top-layer stacking come from the browser rather than hand-rolled JavaScript; menus, popovers, selects and tooltips use the native Popover API, and collapsed regions are removed from the tab order with inert.
- Automated a11y testing in CI
- All 208 stories are run against axe-core through the Storybook test runner in a real Chromium, alongside 48 Vitest files using React Testing Library and jest-axe. CI deploys the exact artifact it just tested rather than rebuilding it.
- Its own documentation site
- neelamui.com is a Next.js App Router site with MDX pages, statically exported to S3 and CloudFront. It depends on neelam-ui as a workspace package and imports the built dist, so the docs exercise the published surface an outside consumer gets; prop tables are generated from the library's own TSDoc and every example renders live beside its verbatim source.
- Blocks gallery
- Eight whole-screen compositions — an analytics dashboard, account settings, sign-in and sign-up, pricing, a team table, an FAQ and a chat panel — each assembled only from published components and copy-pasteable as-is.
- Reduced-motion support
- All transitions are dropped under prefers-reduced-motion (WCAG 2.3.3), including animations built to avoid non-animatable properties (open/close via a grid-template-rows 0fr to 1fr transition instead of height: auto).
- Documented decision log
- A DECISIONS.md recording the per-component accessibility reasoning: why a native element was or wasn't used, how hidden content is removed from the tab order and accessibility tree with inert, and what each ARIA relationship is doing.
- Published and consumable
- Versioned with changesets and published to npm through OIDC trusted publishing with build provenance, as dual ESM/CJS bundles with generated TypeScript declarations and MIT licensing including third-party notices.
Tech stack
Library
- React 19 + TypeScript, authored as a headless-leaning component API
- Tailwind CSS 4 for styling, class-variance-authority for variant-driven props, tailwind-merge so a passed className reliably beats a component default
- Native browser primitives (<dialog>, the Popover API, inert) in place of JavaScript reimplementations
- Recharts as an optional peer dependency, used only by the charting components
Documentation
- Next.js 15 App Router + MDX, statically exported and served from neelamui.com behind AWS CloudFront
- Prop tables generated from the library's TSDoc with react-docgen-typescript; examples and blocks generated into a registry at build time so each demo ships with its own verbatim source
- Storybook 10 with the a11y addon, one story file per component, published separately at storybook.neelamui.com
Testing
- Vitest + React Testing Library + jest-axe for unit and accessibility assertions (48 test files)
- Storybook test runner with axe-playwright running axe-core over all 208 stories in a real browser
Build and distribution
- npm workspaces monorepo: the package, the docs site, and the CloudFront edge function that redirects the legacy URLs
- tsup producing ESM + CJS bundles with TypeScript declaration files
- Published to npm as neelam-ui with an exports map and peer-dependency ranges for React; releases versioned by changesets and published via OIDC trusted publishing with provenance
- GitHub Actions CI running lint, the unit suite, the package build, the docs typecheck and build, and the full axe-core story sweep on every push and pull request
Skills demonstrated
Accessibility engineering to a published specification (WAI-ARIA APG), design-system and component API design, keyboard and focus management, automated accessibility testing, npm package authoring and distribution (bundling, type declarations, release automation, licensing and compliance), monorepo tooling, documentation-site engineering with Next.js and MDX, and CI/CD pipeline configuration.