A React component library built with TypeScript, Next.js, and Shadcn/UI, providing customizable UI components for web applications.
- run the following command to install the npm package
npm install ssw-tinacms-landingkit- import and use any of the templates into your
tina/config.tsfile
//replace with the React icons you want to use
import * as AntIcons from "../../node_modules/react-icons/ai";
import {
breadcrumbBlock,
buttonBlock,
cardCarouselBlock,
imageTextBlock,
logoCarouselBlock,
// replace this with a relative path node modules directory (See known issues)
} from "../../node_modules/ssw-tinacms-landingkit/dist";
export default defineConfig({
// ...
schema: {
collections: [
{
label: "<your-collection-label>",
name: "<post>",
path: "<your-path>",
fields: [
// ... other fields
{
//...
fields: [
{
type: "object",
list: true,
label: "<your label>",
name: "blocks",
ui: {
visualSelector: true,
},
templates: [
// include the schema definitions for the components you want to use
breadcrumbBlock(
"https://github.com/SSWConsulting/SSW.TinaCMS.LandingKit/blob/main/tina-starter/public/tina/previews/breadcrumbs.jpg?raw=true"
),
logoCarouselBlock(
"https://github.com/SSWConsulting/SSW.TinaCMS.LandingKit/blob/main/tina-starter/public/tina/previews/logo-carousel.png?raw=true?raw=true"
),
buttonBlock({
icons: AntIcons,
previewSrc:
"https://github.com/SSWConsulting/SSW.TinaCMS.LandingKit/blob/main/tina-starter/public/tina/previews/button.png?raw=true",
}),
cardCarouselBlock({
icons: AntIcons,
previewSrc:
"https://github.com/SSWConsulting/SSW.TinaCMS.LandingKit/blob/main/tina-starter/public/tina/previews/card-carousel.jpg?raw=true",
}),
imageTextBlock({
icons: AntIcons,
previewSrc:
"https://github.com/SSWConsulting/SSW.TinaCMS.LandingKit/blob/main/tina-starter/public/tina/previews/image-text-block.png?raw=true",
}),
accordionBlock({
icons: AntIcons,
previewSrc:
"https://github.com/SSWConsulting/SSW.TinaCMS.LandingKit/blob/main/tina-starter/public/tina/previews/accordion.png?raw=true",
}),
],
},
],
},
],
},
],
},
});- import the component styling into your
app/layout.tsxfile (import component styling before app styling)
import "ssw-tinacms-landingkit/dist/style.css";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html>
<body>{children}</body>
</html>
);
}- Define and use a blocks component in your page
- For more information refer to the TinaCMS documentation on block based editing
import React from "react";
// replaced with the react-icons you want to use
import * as AntIcons from "react-icons/ai";
import {
Breadcrumbs,
Button,
CardCarousel,
ImageTextBlock,
LogoCarousel,
} from "ssw-tinacms-landingkit";
export const Blocks = (props: Pages) => {
return (
<>
{props.blocks ? (
props.blocks.map(function (block, i) {
switch (block.__typename) {
case "<outer-schema>BlocksLogoCarousel":
return <LogoCarousel repeat={10} data={block} />;
case "<outer-schema>BlocksBreadcrumbs":
return (
<Breadcrumbs
data={{
...block,
//URL segment mapping is configured outside of the schema
breadcrumbReplacements: [
{
from: "explore",
to: "Explore",
},
],
firstBreadcrumb: "Home",
}}
/>
);
case "<outer-schema>BlocksCardCarousel":
return (
<CardCarousel
icons={AntIcons}
callbackFunctions={callbackFunctions}
data={block}
/>
);
case "<outer-schema>BlocksButton":
return (
<Button
icons={AntIcons}
callbackFunctions={callbackFunctions}
data={block}
/>
);
case "<outer-schema>BlocksImageTextBlock":
return (
<ImageTextBlock
icons={AntIcons}
callbackFunctions={callbackFunctions}
data={block}
></ImageTextBlock>
);
case "<outer-schema>BlocksAccordion":
return (
<Accordion
icons={AntIcons}
callbackFunctions={callbackFunctions}
data={block}
></Accordion>
);
default:
return <></>;
}
})
) : (
<></>
)}
</>
);
};For more information on how to use the components see the following links:
- Logo Carousel
- Breadcrumbs
- CardCarousel
- CardCarousel (stacked layout)
- Button
- Icon Picker Input
- Color Picker Input
- Image Text Block
- Accordion Block
- for example schema configurations see:
tina-starter\tina\collections\post.tsx
These components were designed with Inter fonts in, so it's recommended that you use Inter in your project.
Please note that you can import and apply inter fonts at varying scopes in your project. In this example we're
configuring the full application to use it inside of app/layout.tsx
//import inter fonts
import { Inter } from "next/font/google";
//configure inter font variants
const inter = Inter({
variable: "--inter-font",
subsets: ["latin"],
display: "swap",
weight: ["200", "300", "400", "500", "600", "700"],
});
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
//apply inter fonts to full application
return (
<html lang="en" className={`${inter.className}`}>
<body
style={{
margin: "3rem",
}}
>
<main>{children}</main>
</body>
</html>
);
}- 🎨 Customizable theming and styling
- 📱 Responsive design
- 🔧 TypeScript support
- ⚡ Next.js compatible
- 🎯 TinaCMS integration for content management
- React 18 or higher
- TailwindCSS 3.4.17
- Next.js 13 or higher
- TypeScript 4.5 or higher
- React Icons 5.0 or higher
| Component Name | Preview Image |
|---|---|
| Logo Carousel |  |
| Breadcrumbs |  |
| CardCarousel |  |
| CardCarousel (stacked layout) |  |
| Button |  |
| Icon Picker Input |  |
| Color Picker Input |  |
| Image Text Block |  |
| Accordion |  |
The component scan be manually styled by applying tailwind classes to the components themselves using the className property.
For conflicting tailwind classes or styling that cannot be configured by appending styles to the
outer component each component inludes input props. This can include classes defined in your tailwind
config file.
- install all dependencies and build the project from the root by running
pnpm iand thenpnpm build - run the following at the root of the project
pnpm link --global - navigate to the root of the test project
cd tina-starter - link test project with the component package by running
pnpm link --global ssw-tinacms-landingkit - install all dependencies and run the project by running
pnpm iand thenpnpm dev - check you can view the components at
http://localhost:3000/orhttp://localhost:3000/admin#/~
- rebuild the components with your customizations by running
pnpm run build - If you've already linked the repo using the steps outlined in
Previewing componentsyou should be able to see your changes
- Update the version number in
package.jsonusing Semver- This should indicate whether the change MAJOR, MINOR, or a PATCH
- Merge any new changes into the
mainbranch to prevent snowflake npm publications- Note: you do not need to merge changes to
/distinto main
- Note: you do not need to merge changes to
- Publish a GitHub release with the same version number as the one you incremented in the file package.json at https://github.com/SSWConsulting/SSW.TinaCMS.LandingKit/releases/new
MIT License
- Q: 'tailwindcss' is not recognized as an internal or external command
- A: you need to have tailwind installed on your machine. You can fix this by running npm i --global tailwindcss
- The "cardGuidList" for the CardCarousel schema must have a default configured or you will not be able to add new queries without erros.
- The schema definitions only work when using relative imports
- When using custom tailwind classes in your project they may conflict with the classes used in the component library