Skip to content

Docs update to classes #1682

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
shinokada merged 1 commit into from
Jul 17, 2025
Merged

Docs update to classes #1682

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 25 additions & 4 deletions src/routes/docs/pages/customization.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,28 @@ In Tailwind CSS, you can make any utility class important by adding a `!` charac

## Overwriting Specific Classes

While the `class` prop can be used for most components, some components with a complex structure may require multiple props. For instance, let's consider [the Banner component](https://next.flowbite-svelte.com/docs/components/banner#component-data) has two relevant props: `class` for `div` and `classInner` for `innerClass`. To overwrite the `div`, you can use the `classDiv` prop:
While the `class` prop can be used for most components, some components with a complex structure may require multiple props.

For instance, let's consider [the Banner component](https://next.flowbite-svelte.com/docs/components/banner#component-data) has two relevant props: `class` for `div` and `classInner` for `innerClass`. To overwrite the `div`, you can use the `classDiv` prop:

Comment on lines +43 to +46
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot Jul 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Prop-name inconsistencies will confuse readers

You mix three different identifiers for the same Banner prop: classInner, innerClass, and classDiv. Please standardise on the actual API names (per current source it’s innerClass and class) or readers will waste time hunting for the correct prop.

-... two relevant props: `class` for `div` and `classInner` for `innerClass`. To overwrite the `div`, you can use the `classDiv` prop:
+... two relevant props: `class` for the outer `<div>` and `innerClass` for the inner wrapper. To overwrite the outer `<div>`, use the `class` prop:
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
While the `class` prop can be used for most components, some components with a complex structure may require multiple props.
For instance, let's consider [the Banner component](https://next.flowbite-svelte.com/docs/components/banner#component-data) has two relevant props: `class` for `div` and `classInner` for `innerClass`. To overwrite the `div`, you can use the `classDiv` prop:
While the `class` prop can be used for most components, some components with a complex structure may require multiple props.
For instance, let's consider [the Banner component](https://next.flowbite-svelte.com/docs/components/banner#component-data) has two relevant props: `class` for the outer `<div>` and `innerClass` for the inner wrapper. To overwrite the outer `<div>`, use the `class` prop:
🤖 Prompt for AI Agents 
In src/routes/docs/pages/customization.md around lines 43 to 46, the
documentation inconsistently refers to the Banner component props as
`classInner`, `innerClass`, and `classDiv`. To fix this, standardize all prop
names to match the actual API, which uses `class` for the div and `innerClass`
for the inner element. Replace all incorrect prop names with these correct ones
to avoid reader confusion.

```svelte example class="flex flex-col relative"
<script>
import { Banner, Skeleton, ImagePlaceholder } from "flowbite-svelte";
</script>

<Skeleton class="py-4" />
<ImagePlaceholder class="py-4" />

<Banner id="default-banner" type="bottom" class="border-green-600 bg-green-700 dark:border-green-400 dark:bg-green-500" innerClass="text-white">
<p class="flex items-center text-sm font-normal">Overwriting divClass and innerClass</p>
</Banner>
```
Comment on lines +47 to +58
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot Jul 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Example uses wrong / deprecated prop names

The snippet still shows innerClass, but the paragraph above claims classInner or classDiv. Align the example so it matches the final, recommended names.

-<Banner id="default-banner" type="bottom" class="border-green-600 bg-green-700 dark:border-green-400 dark:bg-green-500" innerClass="text-white">
+<Banner
+  id="default-banner"
+  type="bottom"
+  class="border-green-600 bg-green-700 dark:border-green-400 dark:bg-green-500"
+  innerClass="text-white"
+>

Committable suggestion skipped: line range outside the PR's diff.

🤖 Prompt for AI Agents 
In src/routes/docs/pages/customization.md around lines 47 to 58, the example
uses the deprecated prop name innerClass for the Banner component, while the
text above recommends using classInner or classDiv. Update the example to
replace innerClass with the correct prop name classInner or classDiv as per the
documentation to ensure consistency and correctness.


You can observe the background color change to green.

### New way of customization

Instead of intrducing multiple props for component's internal element classes new prop `classes` has been introduced: an object of internal element names and desired new classes. The above example will therefore change to:

```svelte example class="flex flex-col relative"
<script>
Expand All @@ -50,12 +71,12 @@ While the `class` prop can be used for most components, some components with a c
<Skeleton class="py-4" />
<ImagePlaceholder class="py-4" />

<Banner id="default-banner" type="bottom" class="dark:border-green-400 dark:bg-green-500">
<p class="flex items-center text-sm font-normal text-gray-500 dark:text-white">Overwriting divClass and innerClass</p>
<Banner id="default-banner" type="bottom" class="border-green-600 bg-green-700 dark:border-green-400 dark:bg-green-500" classes={{ insideDiv:"text-white" }}>
<p class="flex items-center text-sm font-normal">Overwriting divClass and innerClass</p>
</Banner>
```

You can test this by switching to dark mode and observing the background color change to green.
The `classes` prop becomes the default way of customization and the multiple props mentioned above are marked as deprecated.

We hope these instructions help you confidently customize component classes. Feel free to reach out if you have any further questions!

Expand Down