diff --git a/apps/site/next.config.js b/apps/site/next.config.js index 697e656df..f111b19cd 100644 --- a/apps/site/next.config.js +++ b/apps/site/next.config.js @@ -16,7 +16,7 @@ const nextConfig = { ignoreBuildErrors: true, }, transpilePackages: ["next-mdx-remote"], - assetPrefix: process.env.NEXT_PUBLIC_SITE_URL, + assetPrefix: process.env.NEXT_PUBLIC_SITE_URL, async redirects() { return [ { @@ -86,6 +86,29 @@ const nextConfig = { }, ]; }, + webpack: { + configure: (webpackConfig) => { + // webpackConfig.module.rules.push({ + // test: /\.(ts|tsx|html|mdx|md|js|jsx)$/, + // loader: 'raw-loader', + // options: { transpileOnly: true }, + // }); + + webpackConfig.module.rules.push({ + test: /\.html$/, + use: 'raw-loader', + }); + + // For .tsx files imported with ?raw + webpackConfig.module.rules.push({ + test: /\.tsx$/, + resourceQuery: /raw/, // applies only when '?raw' is present + use: 'raw-loader', + }); + + return webpackConfig; + }, + }, }; module.exports = nextConfig; diff --git a/apps/site/package.json b/apps/site/package.json index 8ef33c2f4..3b65dec03 100644 --- a/apps/site/package.json +++ b/apps/site/package.json @@ -36,11 +36,14 @@ "next-mdx-remote": "5.0.0", "next-nprogress-bar": "2.3.13", "next-themes": "0.2.1", + "prettier": "3.3.3", + "raw-loader": "4.0.2", "react": "18.2.0", "react-apexcharts": "1.4.1", "react-day-picker": "8.10.0", "react-dom": "18.2.0", "react-hook-form": "7.51.2", + "react-syntax-highlighter": "15.6.1", "rehype-autolink-headings": "7.0.0", "rehype-pretty-code": "0.3.2", "rehype-slug": "6.0.0", diff --git a/apps/site/src/app/docs/[...slug]/page.tsx b/apps/site/src/app/docs/[...slug]/page.tsx index 7b701f797..e31e22568 100644 --- a/apps/site/src/app/docs/[...slug]/page.tsx +++ b/apps/site/src/app/docs/[...slug]/page.tsx @@ -3,7 +3,7 @@ import { CodePreview, ColorPalette, FrameworkCard, - ComponentPreview, + OldComponentPreview, } from "@components"; import Link from "next/link"; import { Code } from "bright"; @@ -103,9 +103,15 @@ import * as HTMLVideo from "@components/docs-html/video"; import * as HTMLCheckbox from "@components/docs-html/checkbox"; import * as HTMLRadio from "@components/docs-html/radio"; import * as HTMLSwitch from "@components/docs-html/switch"; -import * as HTMLBadge from "@components/docs-html/badge"; +// import * as HTMLBadge from "@components/docs-html/badge"; import * as HTMLAccordion from "@components/docs-html/accordion"; + + +import CodeSnippet from '@components/CodeSnippet'; +import ComponentPreview from '@components/ComponentPreview'; +import PreviewWithCode from '@components/PreviewWithCode'; + async function readDocsContentFn(pathUrl: string) { const fullPath = `${path.join( process.cwd(), @@ -202,7 +208,10 @@ export default async function Docs({ params: { slug } }) { CodePreview, ColorPalette, FrameworkCard, + OldComponentPreview, ComponentPreview, + PreviewWithCode, + CodeSnippet, // default-components pre: Code, @@ -361,7 +370,7 @@ export default async function Docs({ params: { slug } }) { HTMLCheckbox, HTMLRadio, HTMLSwitch, - HTMLBadge, + // HTMLBadge, HTMLAccordion, }} /> diff --git a/apps/site/src/app/docs/content/html/accordion.mdx b/apps/site/src/app/docs/content/html/accordion.mdx index 176fb7fe2..d938e6244 100644 --- a/apps/site/src/app/docs/content/html/accordion.mdx +++ b/apps/site/src/app/docs/content/html/accordion.mdx @@ -21,160 +21,7 @@ We created a series of accordion examples to help you build easier your applicat Here's how to implement a simple and responsive `Accordion` component. It can be used for FAQs in your website. -}> -```html -
-
- -
- Material Tailwind is an open-source crafted in Tailwind CSS. Get - Material Tailwind and take advantage of its free components and - features that will help you set up your web project quickly. -
-
-
- - -
- -
- - -
-
- - - -``` - + --- @@ -182,11 +29,11 @@ accordionItems.forEach((item) => { You can set all the `Accordion` items to be open by default by passing an array of values to the `defaultValue` prop. -}> +}> ```html
``` - + --- @@ -194,7 +41,7 @@ You can set all the `Accordion` items to be open by default by passing an array The `Accordion` component could be either controlled or uncontrolled. In the controlled mode, you can manage the state of the `Accordion` component by yourself. You can use the `value` and `onValueChange` props to control the state of the `Accordion` component. -}> +}> ```tsx import * as React from "react"; import { Accordion, Button } from "@material-tailwind/react"; @@ -267,7 +114,7 @@ export function ControlledAccordion() { ); } ``` - + --- @@ -276,7 +123,7 @@ export function ControlledAccordion() { You can customize the `Accordion` trigger icon by using the `Accordion.Trigger` component. To make it work, you need to use `group-data-[open=true]` for the icons to show/hide based on the `Accordion` state. -}> +}> ```tsx import { Accordion } from "@material-tailwind/react"; import { Minus, Plus } from "iconoir-react"; @@ -324,7 +171,7 @@ export function AccordionCustomIcon() { ); } ``` - + --- @@ -332,7 +179,7 @@ export function AccordionCustomIcon() { You can customize the `Accordion` component by using the `className` prop. In the example below, we've showcased how to create a custom style for the `Accordion` component. -}> +}> ```tsx import { Accordion } from "@material-tailwind/react"; import { NavArrowDown } from "iconoir-react"; @@ -386,7 +233,7 @@ export function AccordionCustomStyles() { ); } ``` - + --- @@ -394,7 +241,7 @@ export function AccordionCustomStyles() { You can disable the `Accordion` item by adding the `disabled` prop. This will prevent the user from interacting with the `Accordion` item. -}> +}> ```tsx import { Accordion } from "@material-tailwind/react"; import { NavArrowDown } from "iconoir-react"; @@ -439,4 +286,4 @@ export function AccordionDisabled() { ); } ``` - + diff --git a/apps/site/src/app/docs/content/html/alert.mdx b/apps/site/src/app/docs/content/html/alert.mdx index 532ec1571..0444ac61f 100644 --- a/apps/site/src/app/docs/content/html/alert.mdx +++ b/apps/site/src/app/docs/content/html/alert.mdx @@ -21,18 +21,7 @@ Below we are presenting examples of alerts that you can use in your Tailwind CSS This example of alert with white text and dark gray background creates a high contrast ratio that improves readability and attracts attention. -}> -```html - -``` - + --- @@ -40,44 +29,7 @@ This example of alert with white text and dark gray background creates a high co The alert component comes with 3 different variants that you can change using the gradient classes. -}> -```html -
- - - - -
-``` - + --- @@ -85,60 +37,7 @@ The alert component comes with 3 different variants that you can change using th The alert component comes with 19 different colors that you can change using the color classes, below you can find some of the available colors. -}> -```html -
- - - - - - -
-``` - + --- @@ -146,49 +45,7 @@ The alert component comes with 19 different colors that you can change using the You can add an icon at the beginning of the alert component using the `i` tag. -}> -```html - -``` - + --- @@ -196,359 +53,21 @@ You can add an icon at the beginning of the alert component using the `i` tag. You can add any element you want for the Alert component, below you can see an example of alert with a list inside. -}> -```html -
- - - - -
-``` - + --- ## Alert Dismissible -}> -```html - - - - -``` - - + --- ## Alert Custom Close Icon You can use any DOM element as the alert closing icon. - -}> -```html - - - - -``` - + --- @@ -556,110 +75,11 @@ You can use any DOM element as the alert closing icon. Use the example below to use an alert component with content elements like title and description. -}> -```html - - - - -``` - + --- ## Alert Custom Styles -}> -```html - -``` - + \ No newline at end of file diff --git a/apps/site/src/app/docs/content/html/avatar.mdx b/apps/site/src/app/docs/content/html/avatar.mdx index d8e91971a..aadb3e9ca 100644 --- a/apps/site/src/app/docs/content/html/avatar.mdx +++ b/apps/site/src/app/docs/content/html/avatar.mdx @@ -20,7 +20,7 @@ We created a series of avatar examples to help you build easier your application Use our default example of placeholder for user profiles with Tailwind CSS classes for a responsive and circular design. -}> +}> ```html ``` - + --- @@ -36,7 +36,7 @@ Use our default example of placeholder for user profiles with Tailwind CSS class See below how you can implement different shapes for your Material Tailwind avatar. -}> +}> ```html
``` - +
@@ -68,7 +68,7 @@ The default or circular variant works great for social media platforms and chat See below how you can modify the size of your avatar from small (6x6) to large (110x110 pixels) using Tailwind CSS classes. This way, the avatar can be responsively scaled to fit different design contexts. -}> +}> ```html
``` - + --- @@ -111,7 +111,7 @@ See below how you can modify the size of your avatar from small (6x6) to large ( You can use avatar with other components as well. Our example below which includes typography shows how to form a complete user identity block. -}> +}> ```html
@@ -161,7 +161,7 @@ You can use avatar with other components as well. Our example below which includ
``` - + --- @@ -169,7 +169,7 @@ You can use avatar with other components as well. Our example below which includ Use this example to implement a horizontal stack of avatar images for representing multiple users in a shared space, like a group chat or website team section. -}> +}> ```html
``` - + --- ## Avatar Custom Styles You can use tailwind css classes with avatar to create custom styles for avatar. Below is an example of how you can create a custom avatar with a border and a ring around the image. -}> +}> ```html ``` - + --- diff --git a/apps/site/src/app/docs/content/html/badge.mdx b/apps/site/src/app/docs/content/html/badge.mdx index a434fa9c4..ae165a8ce 100644 --- a/apps/site/src/app/docs/content/html/badge.mdx +++ b/apps/site/src/app/docs/content/html/badge.mdx @@ -22,42 +22,7 @@ Let's take a look at some examples of badge components. Get started with this simple badge example that comes with notification button and a small indicator for the number of notifications that can be clicked to interact with them. -}> -```html -
-
- -
- - 5 - -
-``` - + --- @@ -67,204 +32,7 @@ We provide different badge colors like `primary`, `secondary`, `info`, `success` In the example below, we've showcased the different badge colors that you can use in your project. -}> -```html -
-
-
- -
- - 5 - -
-
-
- -
- - 5 - -
-
-
- -
- - 5 - -
-
-
- -
- - 5 - -
-
-
- -
- - 5 - -
-
-
- -
- - 5 - -
-
-``` - + --- @@ -272,140 +40,7 @@ In the example below, we've showcased the different badge colors that you can us Check out this practical coded example of how to position elements in different relative locations within a container to customise your badge component to fit your project. -}> -```html -
-
-
- -
- - 5 - -
-
-
- -
- - 5 - -
-
-
- -
- - 5 - -
-
-
- -
- - 5 - -
-
-``` - + --- @@ -415,40 +50,7 @@ Use this versatile example of a badge with an indicator that does not contain te This component can be used in user interfaces where a visual indicator is needed to draw attention to a specific element, like a settings button. -}> -```html -
-
- -
- -
-``` - + --- @@ -456,96 +58,7 @@ This component can be used in user interfaces where a visual indicator is needed This code snippet provides examples of how badge indicators can be effectively used with different UI elements to convey additional information or enhance the visual appeal of the components. -}> -```html -
-
-
- -
- - 5 - -
-
-
- -
- -
-
-
- profile-picture -
- - 5 - -
-
-
- profile-picture -
- -
-
-``` - + --- @@ -553,42 +66,7 @@ This code snippet provides examples of how badge indicators can be effectively u Notify users of unread messages, alerts, or other important information using this simple badge with border and indicator. -}> -```html -
-
- -
- - 5 - -
-``` - + --- @@ -596,58 +74,7 @@ Notify users of unread messages, alerts, or other important information using th Use this example in your project if you want to represent a completed or acknowledged state. -}> -```html -
-
- -
- - - - - -
-``` - +
diff --git a/apps/site/src/app/docs/content/html/breadcrumb.mdx b/apps/site/src/app/docs/content/html/breadcrumb.mdx index 979c0cd3d..8f32d2ae2 100644 --- a/apps/site/src/app/docs/content/html/breadcrumb.mdx +++ b/apps/site/src/app/docs/content/html/breadcrumb.mdx @@ -20,7 +20,7 @@ See below our versatile breadcrumbs component example that you can use in your T Use this example of responsive breadcrumbs styled with a background opacity for visual distinction and interactive elements that change color upon hover, improving user experience by guiding them through the website's pages. -}> +}> ```html ``` - + --- @@ -57,7 +57,7 @@ Use this example of responsive breadcrumbs styled with a background opacity for You can add any type of icon for the breadcrumbs component as easily as using icons in html. -}> +}> ```html ``` - + --- @@ -116,7 +116,7 @@ You can add any type of icon for the breadcrumbs component as easily as using ic You can modify the Breadcrumbs separators, check out the example below: -}> +}> ```html ``` - + --- @@ -153,7 +153,7 @@ You can modify the Breadcrumbs separators, check out the example below: You can add custom styles to your Breadcrumbs, check out the example below: -}> +}> ```html ``` - + diff --git a/apps/site/src/app/docs/content/html/button-group.mdx b/apps/site/src/app/docs/content/html/button-group.mdx index 72ef4bbb6..b3c9e776a 100644 --- a/apps/site/src/app/docs/content/html/button-group.mdx +++ b/apps/site/src/app/docs/content/html/button-group.mdx @@ -22,7 +22,7 @@ We created a series of button group examples to help you build easier your appli This component example showcases a responsive button group with detailed control over appearance and layout. The use of utility classes makes it easy to customize each aspect of the button group's design. -}> +}> ```html
``` - + --- @@ -53,7 +53,7 @@ This component example showcases a responsive button group with detailed control Get inspired by this series of button groups, each with different styling, arranged in a vertical stack. -}> +}> ```html
@@ -138,7 +138,7 @@ Get inspired by this series of button groups, each with different styling, arran
``` - + --- @@ -146,7 +146,7 @@ Get inspired by this series of button groups, each with different styling, arran This button group component example shows you how to create responsive and scalable UI components with varied dimensions and emphasis. -}> +}> ```html
@@ -211,7 +211,7 @@ This button group component example shows you how to create responsive and scala
``` - + --- @@ -219,7 +219,7 @@ This button group component example shows you how to create responsive and scala This example showcases six distinct button groups, each differentiated by color to represent various actions or states within an application or website. -}> +}> ```html
@@ -344,7 +344,7 @@ This example showcases six distinct button groups, each differentiated by color
``` - + --- @@ -352,7 +352,7 @@ This example showcases six distinct button groups, each differentiated by color Use this example to create button groups with icons, you can use any type of icons, in the below example we've used the [Iconoir](https://iconoir.com/) icons. -}> +}> ```html
@@ -657,7 +657,7 @@ Use this example to create button groups with icons, you can use any type of ico
``` - + --- @@ -665,7 +665,7 @@ Use this example to create button groups with icons, you can use any type of ico This example illustrates a single row of three buttons optimized for a full-width layout within a container that allows for horizontal scrolling on smaller screens and becomes fully visible on larger screens. -}> +}> ```html
@@ -750,7 +750,7 @@ This example illustrates a single row of three buttons optimized for a full-widt
``` - + --- @@ -758,7 +758,7 @@ This example illustrates a single row of three buttons optimized for a full-widt This example illustrates pill button groups in different styles like ghost, outline, solid, and gradient. You can use the `rounded-full` class to create pill button groups. -}> +}> ```html
@@ -843,7 +843,7 @@ This example illustrates pill button groups in different styles like ghost, outl
``` - + --- @@ -851,7 +851,7 @@ This example illustrates pill button groups in different styles like ghost, outl You can use tailwind css classes with button groups to create beautiful buttons for different purposes, below you can use the example to create a button group for social media. -}> +}> ```html
``` - + --- diff --git a/apps/site/src/app/docs/content/html/button.mdx b/apps/site/src/app/docs/content/html/button.mdx index f8a08f9c1..e52f17d1f 100644 --- a/apps/site/src/app/docs/content/html/button.mdx +++ b/apps/site/src/app/docs/content/html/button.mdx @@ -20,7 +20,7 @@ See below our button components examples. Use this versatile button that comes with a purple background and white text, rounded corners, and a color change on hover, showing interactivity. -}> +}> ```html ``` - + --- @@ -98,7 +98,7 @@ Here's how to implement a simple and responsive icon button component. It can be Check out how to implement different visual styles and interaction states for your icon button using a combination of utility classes. -}> +}> ```html
``` - + --- @@ -379,7 +379,7 @@ Check out how to implement different visual styles and interaction states for yo Use this example to create icon buttons in different sizes like small, medium, and large. -}> +}> ```html
``` - + --- @@ -593,7 +593,7 @@ Use this example to create icon buttons in different sizes like small, medium, a Use this example to create icon buttons in different colors like primary, secondary, info, success, warning, and error, each color can be used to represent a different action. -}> +}> ```html
``` - + --- @@ -1008,7 +1008,7 @@ Use this example to create icon buttons in different colors like primary, second Use this example to create a rounded icon button element for your Tailwind CSS project. The circular shape is achieved through the `rounded-full` class. -}> +}> ```html
``` - + --- @@ -1289,7 +1289,7 @@ Use this example to create a rounded icon button element for your Tailwind CSS p Use this example to create icon buttons with link element. These buttons are designed to provide users with clickable elements that also serve as links, integrating functionality with navigation within a webpage. -}> +}> ```html
``` - + --- @@ -1584,7 +1584,7 @@ Implement social media buttons with our icon button component example. In the example below, each button represents a different social media platform through the icons and distinct background colors associated with each platform. -}> +}> ```html
``` - + --- diff --git a/apps/site/src/app/docs/content/html/image.mdx b/apps/site/src/app/docs/content/html/image.mdx index 0fb95d7b0..df4e6b882 100644 --- a/apps/site/src/app/docs/content/html/image.mdx +++ b/apps/site/src/app/docs/content/html/image.mdx @@ -20,7 +20,7 @@ See below our examples of image UI components. This example displays a simple image within a scrollable, centered grid layout. The responsive design classes ensure that the layout adapts to different screen sizes, enhancing the user experience across devices. -}> +}> ```html ``` - + --- @@ -36,7 +36,7 @@ This example displays a simple image within a scrollable, centered grid layout. Check this example to see how you can implement rounded corners for your images. -}> +}> ```html ``` - + --- @@ -52,7 +52,7 @@ Check this example to see how you can implement rounded corners for your images. Use `rounded-full` class to round the corners of the image into a circle. This effect will be most noticeable if the image is square; otherwise, the image will look elliptical. -}> +}> ```html ``` - + --- @@ -68,7 +68,7 @@ Use `rounded-full` class to round the corners of the image into a circle. This e In this example, the `shadow-xl shadow-black/25` classes add a large shadow effect with a black color and opacity (25%). This creates a sense of depth and improves the image visually from its background, making it stand out more prominently. -}> +}> ```html ``` - + --- @@ -84,7 +84,7 @@ In this example, the `shadow-xl shadow-black/25` classes add a large shadow effe Use this example if you want to include a caption below the image. Adding images with captions enriches the content and provides visual breaks in the text. -}> +}> ```html
``` - + --- @@ -105,7 +105,7 @@ Use this example if you want to include a caption below the image. Adding images In the example below, the styling includes a semi-transparent white background with a blur effect (`backdrop-blur-md`), making the text readable regardless of the image behind it. The border, padding, and shadow improve visibility and aesthetic appeal. -}> +}> ```html
``` - \ No newline at end of file + \ No newline at end of file diff --git a/apps/site/src/app/docs/content/html/input.mdx b/apps/site/src/app/docs/content/html/input.mdx index b7569a4b9..5c84951cf 100644 --- a/apps/site/src/app/docs/content/html/input.mdx +++ b/apps/site/src/app/docs/content/html/input.mdx @@ -22,7 +22,7 @@ See below Material Tailwind's input component examples. Use our input example to get started easily. It is perfect for forms requiring text input, such as user registration, login forms, or any form where users need to input a username. -}> +}> ```html ``` - + --- @@ -38,7 +38,7 @@ Use our input example to get started easily. It is perfect for forms requiring t Check out this code snippet to see how you can implement inputs with different sizes. The first input has a height of 28 pixels, the second input has a height of 36 pixels, and the third input has a height of 46 pixels. -}> +}> ```html
``` - + --- @@ -66,7 +66,7 @@ Check out this code snippet to see how you can implement inputs with different s The 6 examples of input components showcased below are HTML snippets styled with Tailwind CSS, each designed to highlight a different focus color theme: Primary, Secondary, Info, Success, Warning and Error. They share a common structure and styling with slight variations in color to differentiate them. -}> +}> ```html
``` - + --- @@ -109,7 +109,7 @@ The 6 examples of input components showcased below are HTML snippets styled with These input examples styled with Tailwind CSS are structured to visually communicate feedback to the user through color-coded cues. Each example represents different states or feedback contexts for user interaction: an error state (red-themed - `border-red-500`, `text-red-500`) and a success state (green-themed - `border-green-500`, `text-green-500`). -}> +}> ```html
@@ -134,7 +134,7 @@ These input examples styled with Tailwind CSS are structured to visually communi
``` - + --- @@ -142,7 +142,7 @@ These input examples styled with Tailwind CSS are structured to visually communi Use this example of input with icon element if you want to add a friendly touch and make it more interactive. -}> +}> ```html
@@ -211,13 +211,13 @@ Use this example of input with icon element if you want to add a friendly touch
``` - + --- ## Input with Label -}> +}> ```html
``` - + --- @@ -242,7 +242,7 @@ Use this example of input with icon element if you want to add a friendly touch Use this example of password input field designed with a focus on security and user guidance. It is styled using Tailwind CSS and includes an accompanying label and a hint message with an icon, aimed at enhancing user experience by providing clear instructions for creating a strong password. -}> +}> ```html
``` - + --- @@ -295,7 +295,7 @@ Use this example of password input field designed with a focus on security and u Use the example below for an input containing a button inside. It is useful for forms where users can enter an email address and then take an action, such as inviting a user to a platform or sending a notification. -}> +}> ```html
``` - + --- ## Input with Dropdown -}> +}> ```html
``` - + --- @@ -354,7 +354,7 @@ Use the example below for an input containing a button inside. It is useful for Use this example if you want to clearly indicate to users that the input field is currently not interactive, employing visual cues and styling to convey its disabled state. -}> +}> ```html
``` - +

The input is explicitly marked as disabled (`disabled attribute`), which prevents user interaction. The styling reflects this state by altering the border and background color (`disabled:border-0 disabled:bg-blue-gray-50`), making it visually distinct from active input fields. This design choice helps users recognize that the input is not currently available for interaction. @@ -379,7 +379,7 @@ The input is explicitly marked as disabled (`disabled attribute`), which prevent Check out this example to learn how you can implement custom styles for your input components with Material Tailwind. -}> +}> ```html

``` - \ No newline at end of file + \ No newline at end of file diff --git a/apps/site/src/app/docs/content/html/list.mdx b/apps/site/src/app/docs/content/html/list.mdx index a8cba9bd4..8b634646f 100644 --- a/apps/site/src/app/docs/content/html/list.mdx +++ b/apps/site/src/app/docs/content/html/list.mdx @@ -20,7 +20,7 @@ Copy-paste the following Tailwind CSS and HTML snippet code examples and you can Check out this example if you are looking for a simple and responsive list component to integrate into your project. You can customize it as you want. -}> +}> ```html
  • @@ -34,7 +34,7 @@ Check out this example if you are looking for a simple and responsive list compo
``` - + --- @@ -42,7 +42,7 @@ Check out this example if you are looking for a simple and responsive list compo Use this example of a list with action buttons (icons). It is a more interactive variant of a list, where each item not only serves as an interactive element navigation or selection) but also includes a button for performing specific actions, such as deletion, editing, or more, indicated by the SVG icon within each button. -}> +}> ```html
  • @@ -125,7 +125,7 @@ Use this example of a list with action buttons (icons). It is a more interactive
``` - + --- @@ -133,7 +133,7 @@ Use this example of a list with action buttons (icons). It is a more interactive Use this beautiful list example that includes profile images alongside text descriptions. It is designed to showcase a team or group of individuals for a contact list, team page, or a similar context. -}> +}> ```html
  • @@ -189,7 +189,7 @@ Use this beautiful list example that includes profile images alongside text desc
``` - + --- @@ -197,7 +197,7 @@ Use this beautiful list example that includes profile images alongside text desc This example adds notification badges to each list item, indicating the number of items or messages within each category ("Inbox", "Spam", "Trash"). These badges provide a visual cue to users about the status or content volume associated with each section. -}> +}> ```html
  • @@ -296,7 +296,7 @@ This example adds notification badges to each list item, indicating the number o
``` - + --- @@ -304,7 +304,7 @@ This example adds notification badges to each list item, indicating the number o In this example, the initial state of the first item ("Inbox") differs slightly from the others; it has a semi-transparent background (`bg-blue-gray-50/50`) that distinguishes it from the rest, indicating a selected or default state. -}> +}> ```html
  • @@ -318,7 +318,7 @@ In this example, the initial state of the first item ("Inbox") differs slightly
``` - + --- @@ -326,7 +326,7 @@ In this example, the initial state of the first item ("Inbox") differs slightly Use this example to implement a list of UI components where one of the items is styled to appear disabled. -}> +}> ```html
  • @@ -340,7 +340,7 @@ Use this example to implement a list of UI components where one of the items is
``` - + --- @@ -348,7 +348,7 @@ Use this example to implement a list of UI components where one of the items is This component example includes `` anchor tags wrapping around each list item, effectively turning each item into a clickable link that can navigate to other pages or execute actions. -}> +}> ```html ``` - + --- @@ -380,7 +380,7 @@ This component example includes `` anchor tags wrapping around each Check out this example to see how you can add custom styles to your Material Tailwind list component. -}> +}> ```html
  • @@ -477,4 +477,4 @@ Check out this example to see how you can add custom styles to your Material Tai
``` - + diff --git a/apps/site/src/app/docs/content/html/navbar.mdx b/apps/site/src/app/docs/content/html/navbar.mdx index 7834926bc..f7bf1c1a0 100644 --- a/apps/site/src/app/docs/content/html/navbar.mdx +++ b/apps/site/src/app/docs/content/html/navbar.mdx @@ -20,7 +20,7 @@ See below our simple navbar example that you can use in your Tailwind CSS projec Use this simple navbar example with navigational links and buttons that get the user's attention to perform specific actions, like "Log in". -}> +}> ```html ``` - + --- @@ -264,7 +264,7 @@ Use this simple navbar example with navigational links and buttons that get the This component example presents a cleaner design navbar styled with `sticky top-0`, making it stick to the top of the viewport as the page scrolls down. Users can easily navigate through the website while engaging with the content, and the sticky navbar makes sure that navigation options are always within reach. -}> +}> ```html
``` - + --- ## Complex Navbar -}> +}> ```html ``` - + --- @@ -842,7 +842,7 @@ This component example presents a cleaner design navbar styled with `sticky top- This navbar component example includes an interactive search input field and a corresponding search button, alowing users to search content directly from the navbar. This feature helps users to quickly access information without navigating away from the current view. -}> +}> ```html ``` - + --- @@ -1107,7 +1107,7 @@ This navbar component example includes an interactive search input field and a c In this example, the navbar uses a black background styled with Tailwind CSS (`bg-black`), creating a dark mode design. -}> +}> ```html ``` - + --- @@ -1343,7 +1343,7 @@ In this example, the navbar uses a black background styled with Tailwind CSS (`b Use this minimalist navbar that can be used across a wide range of websites and web applications where navigation clarity is important. -}> +}> ```html ``` - + --- ## Navbar With Mega Menu -}> +}> ```html ``` - + --- diff --git a/apps/site/src/app/docs/content/html/pagination.mdx b/apps/site/src/app/docs/content/html/pagination.mdx index c41d137fc..250e69aa0 100644 --- a/apps/site/src/app/docs/content/html/pagination.mdx +++ b/apps/site/src/app/docs/content/html/pagination.mdx @@ -20,7 +20,7 @@ See below our simple pagination component example that you can use for your Tail In this example, the pagination has a consistent style with a rounded square shape (`h-10 w-10`) and are styled to differentiate the active page from others. For example, the button for page 1 has a `bg-primary text-white` class, indicating it might be the current page, while the others have `text-priimary` indicating they are not the selected page. -}> +}> ```html
``` - + --- @@ -88,7 +88,7 @@ In this example, the pagination has a consistent style with a rounded square sha This pagination component example uses `rounded-full` for all buttons, giving them a fully circular shape. This design choice can make the pagination component stand out more and provides a more stylish appearance. -}> +}> ```html
``` - + --- @@ -156,7 +156,7 @@ This pagination component example uses `rounded-full` for all buttons, giving th Use the example below to create a simple and minimalist pagination using Tailwind CSS classes and HTML. -}> +}> ```html
``` - +

This pagination component is designed with simplicity and functionality in mind. It lacks page number buttons, focusing solely on navigation between sequential pages. This design choice might be suitable for scenarios where users are likely to navigate content linearly or when space is limited.

@@ -219,7 +219,7 @@ Use the example below to create a simple and minimalist pagination using Tailwin Use this example of merging button borders and rounding off corners for adjacent buttons to create a streamlined look. -}> +}> ```html
``` - +
diff --git a/apps/site/src/app/docs/content/html/progress.mdx b/apps/site/src/app/docs/content/html/progress.mdx index 6c43fdd82..7ea22bb40 100644 --- a/apps/site/src/app/docs/content/html/progress.mdx +++ b/apps/site/src/app/docs/content/html/progress.mdx @@ -18,13 +18,13 @@ Below we are presenting our examples of progress components that you can use in Use this example of a versatile dark gray progress bar with a rounded design and responsive sizing to indicate progress. -}> +}> ```html
``` - + --- @@ -32,7 +32,7 @@ Use this example of a versatile dark gray progress bar with a rounded design and The Progress component comes with 3 different sizes that you can change. -}> +}> ```html
@@ -55,7 +55,7 @@ The Progress component comes with 3 different sizes that you can change.
``` - + --- @@ -63,7 +63,7 @@ The Progress component comes with 3 different sizes that you can change. See below how you can implement varying fill colors to represent different progress states or categories. -}> +}> ```html
@@ -86,7 +86,7 @@ See below how you can implement varying fill colors to represent different progr
``` - + --- @@ -94,7 +94,7 @@ See below how you can implement varying fill colors to represent different progr This progress bar example includes text within the filled portion, explicitly stating "50% Completed." This addition improves user accessibility and understanding by directly communicating the progress level. -}> +}> ```html
``` - + --- @@ -115,7 +115,7 @@ This progress bar example includes text within the filled portion, explicitly st Use the example below to add the label outside the progress bar. -}> +}> ```html

@@ -127,7 +127,7 @@ Use the example below to add the label outside the progress bar.

``` - + --- @@ -135,10 +135,10 @@ Use the example below to add the label outside the progress bar. Use the example below to customize the progress bar. -}> +}> ```html
``` - + diff --git a/apps/site/src/app/docs/content/html/radio.mdx b/apps/site/src/app/docs/content/html/radio.mdx index 23197e4bb..6a97472b2 100644 --- a/apps/site/src/app/docs/content/html/radio.mdx +++ b/apps/site/src/app/docs/content/html/radio.mdx @@ -20,7 +20,7 @@ Use the following example to create simple radio buttons for your projects. The example features two radio buttons, labeled "HTML" and "React", allowing users to select one of these two options. -}> +}> ```html
@@ -97,7 +97,7 @@ The example features two radio buttons, labeled "HTML" and "React", allowing use
``` - + --- @@ -105,7 +105,7 @@ The example features two radio buttons, labeled "HTML" and "React", allowing use This example showcases a set of custom-styled radio buttons designed for selecting colors, with options for `primary`, `secondary`, `info`, `success`, `warning`, and `error`. -}> +}> ```html
@@ -437,13 +437,13 @@ This example showcases a set of custom-styled radio buttons designed for selecti
``` - + --- ## Radio Button with Custom Icon -}> +}> ```html
``` - + --- @@ -546,7 +546,7 @@ This example showcases a set of custom-styled radio buttons designed for selecti Both radio buttons are explicitly marked as disabled using the disabled attribute on the `` elements. This attribute prevents users from being able to select these options, making sure the form behaves correctly in contexts where "HTML" and "React" options should not be selectable. -}> +}> ```html
@@ -625,7 +625,7 @@ Both radio buttons are explicitly marked as disabled using the disabled attribut
``` - + --- @@ -633,7 +633,7 @@ Both radio buttons are explicitly marked as disabled using the disabled attribut This example showcases how you can implement radio buttons with labels that includes a hyperlink. -}> +}> ```html
@@ -716,7 +716,7 @@ This example showcases how you can implement radio buttons with labels that incl
``` - + --- @@ -724,7 +724,7 @@ This example showcases how you can implement radio buttons with labels that incl This example presents a radio button example that incorporates detailed descriptions. This is a more complex and informative approach to presenting radio button options. -}> +}> ```html
@@ -805,7 +805,7 @@ This example presents a radio button example that incorporates detailed descript
``` - + --- @@ -813,7 +813,7 @@ This example presents a radio button example that incorporates detailed descript Check out the example below for implementing custom styles on your radio button component. -}> +}> ```html
@@ -896,4 +896,4 @@ Check out the example below for implementing custom styles on your radio button
``` - \ No newline at end of file + \ No newline at end of file diff --git a/apps/site/src/app/docs/content/html/rating.mdx b/apps/site/src/app/docs/content/html/rating.mdx index 10a3fe054..5920069da 100644 --- a/apps/site/src/app/docs/content/html/rating.mdx +++ b/apps/site/src/app/docs/content/html/rating.mdx @@ -22,7 +22,7 @@ Whether you need a simple star rating system or a more intricate form with half- In this example, the filled stars are rendered with `fill="currentColor"` and given a Tailwind class `text-yellow-700`, which likely applies a shade of yellow color, making them stand out as active or selected ratings. The color choice for the filled stars (yellow) is a common convention for indicating positive or high ratings. -}> +}> ```html
``` - + --- @@ -99,7 +99,7 @@ In this example, the filled stars are rendered with `fill="currentColor"` and gi Check out this example to see how you can implement a rating component on different colors (link amber, blue, green, and red). -}> +}> ```html
@@ -489,13 +489,13 @@ Check out this example to see how you can implement a rating component on differ
} ``` - + --- ## Readonly Rating -}> +}> ```html
``` - + --- @@ -570,7 +570,7 @@ Check out this example to see how you can implement a rating component on differ See this example to understand how you can implement a custom rating based on icons (like a heart icon that suggests affection, preference, or satisfaction levels). -}> +}> ```html
``` - + --- @@ -663,7 +663,7 @@ See this example to understand how you can implement a custom rating based on ic This example provides a detailed way to display ratings and reviews. It combines numerical data with graphical elements. This additional information provides context for the rating, helping users understand how many individual reviews contribute to the average score. -}> +}> ```html

@@ -738,7 +738,7 @@ This example provides a detailed way to display ratings and reviews. It combines

``` - + --- @@ -746,7 +746,7 @@ This example provides a detailed way to display ratings and reviews. It combines This example represents a testimonial section including: customer quote, customer image, customer name and position, and star rating. -}> +}> ```html

@@ -830,7 +830,7 @@ This example represents a testimonial section including: customer quote, custome

``` - + --- diff --git a/apps/site/src/app/docs/content/html/spinner.mdx b/apps/site/src/app/docs/content/html/spinner.mdx index ba72d29f0..f9ee10a4e 100644 --- a/apps/site/src/app/docs/content/html/spinner.mdx +++ b/apps/site/src/app/docs/content/html/spinner.mdx @@ -20,7 +20,7 @@ See below our examples of spinner components. Use this simple spinner consisting of two concentric circles forming the spinning motion. This simplicity ensures that the spinner doesn't distract users from the main content of the application. -}> +}> ```html ``` - + --- @@ -53,7 +53,7 @@ Use this simple spinner consisting of two concentric circles forming the spinnin In this example, the spinner icons are incrementally sized from smaller to larger as you move from left to right. Choose the right size for your Tailwind CSS project. -}> +}> ```html
``` - + --- @@ -198,7 +198,7 @@ In this example, the spinner icons are incrementally sized from smaller to large Check out this loading spinner component, with customizable stroke colors. The colors used in the SVG elements is (`text-surface`) for the spinning animation, while the strokes of the paths within each SVG have different colors: `primary`, `secondary`, `info`, `success`, `warning`, and `error`. Choose the color that suits your project's needs. -}> +}> ```html
``` - + --- @@ -343,7 +343,7 @@ Check out this loading spinner component, with customizable stroke colors. The c Check out this example to see how you can add custom styles to your spinner component using Tailwind. -}> +}> ```html ``` - +
diff --git a/apps/site/src/app/docs/content/html/stepper.mdx b/apps/site/src/app/docs/content/html/stepper.mdx index a4ec72617..108848cf0 100644 --- a/apps/site/src/app/docs/content/html/stepper.mdx +++ b/apps/site/src/app/docs/content/html/stepper.mdx @@ -14,7 +14,7 @@ Whether you're crafting a seamless user journey or simplifying complex forms, Ma ## Stepper Demo -}> +}> ```html
@@ -48,13 +48,13 @@ Whether you're crafting a seamless user journey or simplifying complex forms, Ma
``` - + --- ## Stepper With Icon -}> +}> ```html
@@ -156,13 +156,13 @@ Whether you're crafting a seamless user journey or simplifying complex forms, Ma
``` - + --- ## Stepper With Dots -}> +}> ```html
@@ -186,13 +186,13 @@ Whether you're crafting a seamless user journey or simplifying complex forms, Ma
``` - + --- ## Stepper With Content -}> +}> ```html
@@ -318,13 +318,13 @@ Whether you're crafting a seamless user journey or simplifying complex forms, Ma
``` - + --- ## Stepper Custom Styles -}> +}> ```html
@@ -354,4 +354,4 @@ Whether you're crafting a seamless user journey or simplifying complex forms, Ma
``` - + diff --git a/apps/site/src/app/docs/content/html/switch.mdx b/apps/site/src/app/docs/content/html/switch.mdx index ccc4c42d1..ba07b5a89 100644 --- a/apps/site/src/app/docs/content/html/switch.mdx +++ b/apps/site/src/app/docs/content/html/switch.mdx @@ -20,14 +20,14 @@ Use the following examples to create a simple and easy-to-use switch component f Use this simple component example that changes the background color, border color, and shadow of the switch when it is in the "checked" state. -}> +}> ```html ``` - + --- @@ -35,7 +35,7 @@ Use this simple component example that changes the background color, border colo In this example, you can see how to implement your switch to be checked by default. -}> +}> ```html ``` - + --- @@ -51,7 +51,7 @@ In this example, you can see how to implement your switch to be checked by defau Check out this example to see how you can create a colored diverse set of toggle switches that can be used for various settings or options in a web application. -}> +}> ```html
``` - + --- @@ -88,7 +88,7 @@ Check out this example to see how you can create a colored diverse set of toggle See below how to create a custom switch component with a clear, descriptive label, making it suitable for settings pages, forms, or anywhere else where users need to make a binary choice. -}> +}> ```html
``` - + --- @@ -112,7 +112,7 @@ See below how to create a custom switch component with a clear, descriptive labe This example illustrates a switch component designed to appear disabled and non-interactive. The key features indicating its disabled state include the use of the disabled attribute on the input element, as well as Tailwind CSS classes `opacity-50` and `pointer-events-none` applied to the `input` to visually and functionally disable the entire switch component. -}> +}> ```html ``` - + --- ## Switch with Link -}> +}> ```html
``` - + --- @@ -153,7 +153,7 @@ This example illustrates a switch component designed to appear disabled and non- A switch component like the "Remember Me" example below is typically used in login forms or authentication pages on websites and applications. -}> +}> ```html
``` - + --- @@ -179,11 +179,11 @@ A switch component like the "Remember Me" example below is typically used in log Check out this example to see how you can implement custom styles to your switch component. -}> +}> ```html ``` - \ No newline at end of file + \ No newline at end of file diff --git a/apps/site/src/app/docs/content/html/table.mdx b/apps/site/src/app/docs/content/html/table.mdx index 6b83fc9b3..42d61da5c 100644 --- a/apps/site/src/app/docs/content/html/table.mdx +++ b/apps/site/src/app/docs/content/html/table.mdx @@ -18,7 +18,7 @@ See below Material Tailwind's examples of table components that help developers Use our simple 4 columns table styled with Tailwind CSS to organize your data in a responsive way. -}> +}> ```html
@@ -100,7 +100,7 @@ Use our simple 4 columns table styled with Tailwind CSS to organize your data in
``` - + --- @@ -108,7 +108,7 @@ Use our simple 4 columns table styled with Tailwind CSS to organize your data in In this example, we added the class `even:bg-surface-light` applied to each row, which alternates the background color of even rows for better readability and visual appeal. -}> +}> ```html
@@ -190,13 +190,13 @@ In this example, we added the class `even:bg-surface-light` applied to each row,
``` - + --- ## Table With Striped Column -}> +}> ```html
@@ -286,7 +286,7 @@ In this example, we added the class `even:bg-surface-light` applied to each row,
``` - + --- @@ -294,7 +294,7 @@ In this example, we added the class `even:bg-surface-light` applied to each row, This example showcases a more complex and feature-rich approach to presenting and interacting with tabular data. The inclusion of a search bar and download button directly above the table improves the interface's interactivity and functionality. The use of images, status tags, and action buttons within the table rows adds a layer of complexity and utility, making the data more accessible and actionable. -}> +}> ```html
@@ -791,7 +791,7 @@ This example showcases a more complex and feature-rich approach to presenting an
``` - + --- @@ -799,7 +799,7 @@ This example showcases a more complex and feature-rich approach to presenting an In this example, the combination of filtering tabs, detailed member information, search functionality, and pagination controls makes it a comprehensive solution for managing and displaying member data in a user-friendly manner. -}> +}> ```html
@@ -1275,7 +1275,7 @@ In this example, the combination of filtering tabs, detailed member information,
``` - + --- @@ -1283,7 +1283,7 @@ In this example, the combination of filtering tabs, detailed member information, In this example. the table headers are interactive and sortable, as indicated by the presence of arrow icons next to the column titles ("Member", "Function", "Status", "Employed"). This feature allows users to sort the list based on different attributes, offering a tailored view of the data. -}> +}> ```html
@@ -1867,7 +1867,7 @@ In this example. the table headers are interactive and sortable, as indicated by
``` - + --- diff --git a/apps/site/src/app/docs/content/html/textarea.mdx b/apps/site/src/app/docs/content/html/textarea.mdx index 8df5fb51a..7160fcd0a 100644 --- a/apps/site/src/app/docs/content/html/textarea.mdx +++ b/apps/site/src/app/docs/content/html/textarea.mdx @@ -22,7 +22,7 @@ See below Material Tailwind’s examples of textareas that come in different sty Get started with a simple textarea that comes with rounded corners, border styles, and a label. The label is intelligently styled to transition smoothly when the textarea is focused, and it uses Tailwind CSS classes to achieve these effects. -}> +}> ```html ``` - + --- @@ -38,7 +38,7 @@ Get started with a simple textarea that comes with rounded corners, border style Check this coded example to see how you can implement textarea components for different text input sizes. -}> +}> ```html
``` - + --- @@ -73,7 +73,7 @@ Our component comes with various color styling options. The examples below inclu - To change the border color, use the `focus:border-{color}` class. - To change the text color, use the `focus:text-{color}` class. -}> +}> ```html
``` - + --- @@ -116,7 +116,7 @@ Our component comes with various color styling options. The examples below inclu Use this textareas with error and success themes, contrasting border colors (red for error and green for success), and matching text colors. -}> +}> ```html
@@ -141,13 +141,13 @@ Use this textareas with error and success themes, contrasting border colors (red
``` - + --- ## Textarea with Label -}> +}> ```html
``` - + --- ## Textarea with Helper Text -}> +}> ```html
``` - + --- @@ -239,7 +239,7 @@ Use this example if you want to display information to users without allowing th Use this component that contains a textarea with submitting and canceling button controls for your blog or application if you want to let users leave comments. -}> +}> ```html