@finbb/ui-components
v1.0.0
Published
The Fingenious design system — a React component library built with [Next.js](https://nextjs.org/), [styled-components](https://styled-components.com/), and documented with [Storybook](https://storybook.js.org/).
Readme
@finbb/ui-components
The Fingenious design system — a React component library built with Next.js, styled-components, and documented with Storybook.
Requirements
- Node.js
20.20.2(see.nvmrc) - npm
>=9
It is recommended to use nvm to manage Node versions:
nvm install
nvm useGetting started
Install dependencies:
npm installDevelopment
Storybook
Storybook is the primary development environment. It lets you build, browse, and interact with every component in isolation without needing a host application.
Start the Storybook dev server on http://localhost:6006:
npm startOr explicitly:
npm run start:storybookLibrary watch mode
To rebuild the library output continuously while you develop (useful when linking the package into a
host app via npm link):
npm run devLinting and formatting
Run all linters (JS/TS + CSS-in-JS styles):
npm run lintAuto-fix JS/TS lint errors where possible:
npm run lint:fixFormatting is handled by Prettier and runs automatically on staged files via a pre-commit hook (husky + lint-staged). To format manually:
npx prettier --write .Building
Build both the component library and the Storybook static site:
npm run buildOr build each separately:
# Component library only (outputs to dist/)
npm run build:lib
# Storybook static site only (outputs to storybook-static/)
npm run build:storybookPublishing to npm
- Update the version in
package.jsonfollowing Semantic Versioning. - Build the library:
npm run build:lib - Log in to npm if you have not already:
npm adduser - Publish:
npm publish
prepublishOnlyrunsbuild:libautomatically, so step 2 is optional if you publish directly.
Using the library in a Next.js application
Install the package and its peer dependencies:
npm install @finbb/ui-components next react react-dom uuidWrap your application with DesignSystemProvider to apply the theme:
import { DesignSystemProvider } from '@finbb/ui-components';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html>
<body>
<DesignSystemProvider>{children}</DesignSystemProvider>
</body>
</html>
);
}Then import components as needed:
import { Button, NavigationBar, Header } from '@finbb/ui-components';Project structure
src/
components/ # All UI components, each in its own folder
themes/ # Theme definitions, design tokens, and mixins
types/ # Shared TypeScript types
index.ts # Public API — everything exported from here
.storybook/ # Storybook configurationContributing
See CONTRIBUTING.md for branching, review, and deployment instructions.