@inialum/memories-react
v1.0.0
Published
React component library for the Memories - INIALUM Design System
Downloads
24
Readme
@inialum/memories-react
React component library for the Memories - INIALUM Design System.
Installation
This package requires Tailwind CSS and React 19.
pnpm add @inialum/memories-tailwind-theme @inialum/memories-react
pnpm add -D tailwindcssSetup
1. Import CSS Styles
Import the Memories CSS theme in your global CSS file:
/* src/index.css or src/app.css */
@import 'tailwindcss';
@import '@inialum/memories-tailwind-theme';2. Add data-theme Attribute
Add the data-theme attribute to your HTML:
<!doctype html>
<html lang="en" data-theme="memories">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<div id="root"></div>
</body>
</html>3. Tailwind CSS Configuration
Update your tailwind.config.ts:
// tailwind.config.ts
import type { Config } from 'tailwindcss'
const config = {
content: [
'./src/**/*.{ts,tsx}',
'./node_modules/@inialum/memories-react/**/*.js',
],
} satisfies Config
export default configUsage
import { Button } from '@inialum/memories-react'
function App() {
return (
<Button variant="filled" color="primary" size="medium">
Click me
</Button>
)
}Components
- Button
- ButtonLink
- Footer
- Header
- Navigation
See Storybook for detailed documentation and examples.
License
Licensed under Apache License 2.0. (except for images)
You are not allowed to use or distribute the images.