flowbite-mcp 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (77) hide show
  1. package/LICENSE.md +21 -0
  2. package/README.md +324 -0
  3. package/build/index.js +975 -0
  4. package/build/server-runner.js +228 -0
  5. package/data/components/accordion.md +860 -0
  6. package/data/components/alerts.md +739 -0
  7. package/data/components/avatar.md +178 -0
  8. package/data/components/badge.md +420 -0
  9. package/data/components/banner.md +145 -0
  10. package/data/components/bottom-navigation.md +513 -0
  11. package/data/components/breadcrumb.md +273 -0
  12. package/data/components/button-group.md +410 -0
  13. package/data/components/buttons.md +405 -0
  14. package/data/components/card.md +711 -0
  15. package/data/components/carousel.md +858 -0
  16. package/data/components/chat-bubble.md +1063 -0
  17. package/data/components/clipboard.md +1029 -0
  18. package/data/components/datepicker.md +673 -0
  19. package/data/components/device-mockups.md +152 -0
  20. package/data/components/drawer.md +1353 -0
  21. package/data/components/dropdowns.md +1925 -0
  22. package/data/components/footer.md +299 -0
  23. package/data/components/forms.md +371 -0
  24. package/data/components/gallery.md +322 -0
  25. package/data/components/indicators.md +262 -0
  26. package/data/components/jumbotron.md +213 -0
  27. package/data/components/kbd.md +217 -0
  28. package/data/components/list-group.md +365 -0
  29. package/data/components/mega-menu.md +558 -0
  30. package/data/components/modal.md +1309 -0
  31. package/data/components/navbar.md +1053 -0
  32. package/data/components/pagination.md +472 -0
  33. package/data/components/popover.md +826 -0
  34. package/data/components/progress.md +95 -0
  35. package/data/components/qr-code.md +280 -0
  36. package/data/components/rating.md +323 -0
  37. package/data/components/sidebar.md +1067 -0
  38. package/data/components/skeleton.md +221 -0
  39. package/data/components/speed-dial.md +1270 -0
  40. package/data/components/spinner.md +222 -0
  41. package/data/components/stepper.md +271 -0
  42. package/data/components/tables.md +3127 -0
  43. package/data/components/tabs.md +808 -0
  44. package/data/components/timeline.md +304 -0
  45. package/data/components/toast.md +341 -0
  46. package/data/components/tooltips.md +524 -0
  47. package/data/components/typography.md +269 -0
  48. package/data/components/video.md +95 -0
  49. package/data/forms/checkbox.md +375 -0
  50. package/data/forms/file-input.md +98 -0
  51. package/data/forms/floating-label.md +185 -0
  52. package/data/forms/input-field.md +222 -0
  53. package/data/forms/number-input.md +1099 -0
  54. package/data/forms/phone-input.md +577 -0
  55. package/data/forms/radio.md +315 -0
  56. package/data/forms/range.md +83 -0
  57. package/data/forms/search-input.md +280 -0
  58. package/data/forms/select.md +259 -0
  59. package/data/forms/textarea.md +155 -0
  60. package/data/forms/timepicker.md +732 -0
  61. package/data/forms/toggle.md +176 -0
  62. package/data/plugins/charts.md +2683 -0
  63. package/data/plugins/datatables.md +1922 -0
  64. package/data/plugins/datepicker.md +5 -0
  65. package/data/plugins/wysiwyg.md +2377 -0
  66. package/data/quickstart.md +169 -0
  67. package/data/theme.md +231 -0
  68. package/data/toc.md +79 -0
  69. package/data/typography/blockquote.md +182 -0
  70. package/data/typography/headings.md +174 -0
  71. package/data/typography/hr.md +74 -0
  72. package/data/typography/images.md +168 -0
  73. package/data/typography/links.md +118 -0
  74. package/data/typography/lists.md +387 -0
  75. package/data/typography/paragraphs.md +186 -0
  76. package/data/typography/text.md +249 -0
  77. package/package.json +71 -0
package/data/quickstart.md ADDED
@@ -0,0 +1,169 @@
1
+ ## Getting started
2
+
3
+ Flowbite can be easily integrated into your project through NPM. It functions as a plugin for Tailwind CSS and offers both a data attributes interface and a JavaScript API for powering interactive UI components.
4
+
5
+ ### Install using NPM
6
+
7
+ Make sure that you have <a href="https://nodejs.org/en/" rel="nofollow" target="_blank">Node.js</a> and <a href="https://tailwindcss.com/docs/installation/using-postcss" rel="nofollow" target="_blank">Tailwind CSS</a> installed. This guide works with Tailwind v4.
8
+
9
+ 1. Install Flowbite as a dependency using NPM by running the following command:
10
+
11
+ {{< code lang="bash" >}}
12
+ npm install flowbite
13
+ {{< /code >}}
14
+
15
+ 2. Import the default theme variables from Flowbite inside your main `input.css` CSS file:
16
+
17
+ {{< code lang="css" icon="file" file="input.css" >}}
18
+ /* choose one of the following */
19
+
20
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
21
+ @import "flowbite/src/themes/default";
22
+
23
+ /* MINIMAL THEME
24
+ @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
25
+ @import "flowbite/src/themes/minimal";
26
+ */
27
+
28
+ /* ENTERPRISE THEME
29
+ @import url('https://fonts.googleapis.com/css2?family=Shantell+Sans:ital,wght@0,300..800;1,300..800&display=swap');
30
+ @import "flowbite/src/themes/enterprise";
31
+ */
32
+
33
+ /* PLAYFUL THEME
34
+ @import url('https://fonts.googleapis.com/css2?family=Google+Sans+Code:ital,wght@0,300..800;1,300..800&display=swap');
35
+ @import "flowbite/src/themes/playful";
36
+ */
37
+
38
+ /* MONO THEME
39
+ @import "flowbite/src/themes/mono";
40
+ */
41
+ {{< /code >}}
42
+
43
+ 3. Import the Flowbite plugin file in your CSS:
44
+
45
+ {{< code lang="css" icon="file" file="input.css" >}}
46
+ @plugin "flowbite/plugin";
47
+ {{< /code >}}
48
+
49
+ 4. Configure the source files of Flowbite in your CSS:
50
+
51
+ {{< code lang="css" icon="file" file="input.css" >}}
52
+ @source "../node_modules/flowbite";
53
+ {{< /code >}}
54
+
55
+ 5. Include the JavaScript code that powers the interactive elements before the end of your `<body>` tag:
56
+
57
+ {{< code lang="html" icon="file" file="index.html" >}}
58
+ <script src="../path/to/flowbite/dist/flowbite.min.js"></script>
59
+ {{< /code >}}
60
+
61
+ Learn more about the Flowbite JavaScript API and functionalities in the [JavaScript section](https://flowbite.com/docs/getting-started/javascript/).
62
+
63
+ If you have and old project with Tailwind CSS v3 then [check out this guide](#tailwind-css-v3-to-v4) to learn how to upgrade to v4.
64
+
65
+ ### Include using CDN
66
+
67
+ The quickest way to get started working with Flowbite is to include the CSS and JS into your project via CDN.
68
+
69
+ Require the following minified stylesheet inside the `head` tag:
70
+
71
+ {{< code lang="html" icon="file" file="index.html" >}}
72
+ <link href="https://cdn.jsdelivr.net/npm/flowbite@{{< current_version >}}/dist/flowbite.min.css" rel="stylesheet" />
73
+ {{< /code >}}
74
+
75
+ And include the following JavaScript file before the end of the `body` element:
76
+
77
+ {{< code lang="html" icon="file" file="index.html" >}}
78
+ <script src="https://cdn.jsdelivr.net/npm/flowbite@{{< current_version >}}/dist/flowbite.min.js"></script>
79
+ {{< /code >}}
80
+
81
+ Please remember that the best way to work with Tailwind CSS and Flowbite is by purging the CSS classes.
82
+
83
+ ### Bundled JavaScript
84
+
85
+ One of the most popular way of using Flowbite is to include the bundled Javascript file which is UMD ready using a bundler such as Webpack or Parcel which makes sure that all of the data attributes and functionality will work out-of-the-box.
86
+
87
+ You can directly import the main JavaScript file inside your bundled `app-bundle.js` file like this:
88
+
89
+ {{< code lang="javascript" icon="file" file="app.js" >}}
90
+ import 'flowbite';
91
+ {{< /code >}}
92
+
93
+ This file has access to all of the components and it automatically applies event listeners to the data attributes.
94
+
95
+ ### Data attributes
96
+
97
+ The preferred way to use the interactive UI components from Flowbite is via the data attributes interface which allows us to add functionality via the HTML element attributes and most of the examples on our documentation applies this strategy.
98
+
99
+ For example, to set up a modal component all you need to do is use `data-modal-target` and `data-modal-{toggle|show|hide}` to toggle, show, or hide the component by clicking on any trigger element.
100
+
101
+ ### Init functions
102
+
103
+ You can also use the init functions to set up the event listeners yourself. Here's an example how you can do it with Vue or Nuxt:
104
+
105
+ {{< code lang="javascript" icon="file" file="app.js" >}}
106
+ <script setup>
107
+ import { onMounted } from 'vue'
108
+ import { initFlowbite } from 'flowbite'
109
+
110
+ // initialize components based on data attribute selectors
111
+ onMounted(() => {
112
+ initFlowbite();
113
+ })
114
+ </script>
115
+
116
+ <template>
117
+ // Modal HTML markup with data attributes from Flowbite
118
+ </template>
119
+ {{< /code >}}
120
+
121
+ The `initFlowbite` function sets up all of the init functions for dropdowns, modals, navbars, tooltips and so on to hook onto the data attributes. Alternatively, you can also initialise each component category class separately with `initDropdowns` or `initModals`.
122
+
123
+ You can view more examples by browsing the [components from Flowbite](#components).
124
+
125
+ ### ESM and CJS
126
+
127
+ Flowbite also offers an API for using the components programmatically and it supports both CJS and ESM for JavaScript which can be helpful if you need to expand the default capabilities of the data attributes interface and get access to function callbacks.
128
+
129
+ Here's an example how you can import and create a new Modal component inside JavaScript:
130
+
131
+ {{< code lang="javascript" icon="file" file="app.js" >}}
132
+ import { Modal } from 'flowbite'
133
+
134
+ const $modalElement = document.querySelector('#modalEl');
135
+
136
+ const modalOptions = {
137
+ placement: 'bottom-right',
138
+ backdrop: 'dynamic',
139
+ backdropClasses: 'bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-40',
140
+ onHide: () => {
141
+ console.log('modal is hidden');
142
+ },
143
+ onShow: () => {
144
+ console.log('modal is shown');
145
+ },
146
+ onToggle: () => {
147
+ console.log('modal has been toggled');
148
+ }
149
+ }
150
+
151
+ const modal = new Modal($modalElement, modalOptions);
152
+
153
+ modal.show();
154
+ {{< /code >}}
155
+
156
+ Check out the JavaScript behaviour section of each component's page to learn how you can use this.
157
+
158
+ ### TypeScript
159
+
160
+ Flowbite supports type declarations for the interactive UI components including object interfaces and parameter types. Check out the following examples to learn how you can use types with Flowbite.
161
+
162
+ Additionally to our code above, we will now import some relevant types from the Flowbite package, namely the `ModalOptions` and `ModalInterface`:
163
+
164
+ {{< code lang="javascript" icon="file" file="app.ts" >}}
165
+ import { Modal } from 'flowbite'
166
+ import type { ModalOptions, ModalInterface } from 'flowbite'
167
+
168
+ // other code
169
+ {{< /code >}}
package/data/theme.md ADDED
@@ -0,0 +1,231 @@
1
+ This is the theme file that sets the Tailwind CSS variables to make UI look unique for every website.
2
+
3
+ It is mandatory to include all variables when generating a new theme file such as `my-theme.css`.
4
+
5
+ ```css
6
+ @theme {
7
+ --font-sans: 'Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'system-ui', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
8
+ --font-body: 'Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'system-ui', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
9
+ --font-mono: 'ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', 'monospace';
10
+
11
+ /* TEXT VARIABLES */
12
+ --text-2xs: 0.625rem;
13
+ --spacing-8xl: 90rem;
14
+ --leading-9: 36px; /* rem pls */
15
+ --leading-7: 28px;
16
+ --leading-8: 32px;
17
+ --leading-6: 24px;
18
+ --leading-4: 16px;
19
+ --leading-none: 1px;
20
+ --leading-5: 20px;
21
+ --tracking-tighter: -0.8px;
22
+ --leading-heading-none: 60px;
23
+ --tracking-tight: -0.4px;
24
+
25
+ /* BORDER RADIUS VARIABLES */
26
+ --radius-0: 0px;
27
+ --radius-xxs: 2px;
28
+ --radius-xs: 4px;
29
+ --radius-sm: 6px;
30
+ --radius: 8px;
31
+ --radius-base: 12px;
32
+ --radius-lg: 16px;
33
+
34
+ /* BORDER WIDTH VARIABLES */
35
+ --default-border-width: 1px;
36
+
37
+ /* TEXT COLORS VARIABLES */
38
+ /* main text color */
39
+ --color-body: var(--color-gray-600);
40
+ --color-body-subtle: var(--color-gray-500);
41
+
42
+ /* text heading colors */
43
+ --color-heading: var(--color-gray-900);
44
+
45
+ /* used for custom brand colors */
46
+ --color-fg-brand-subtle: var(--color-blue-200);
47
+ --color-fg-brand: var(--color-blue-700);
48
+ --color-fg-brand-strong: var(--color-blue-900);
49
+
50
+ /* used for status colors */
51
+ --color-fg-success: var(--color-emerald-700);
52
+ --color-fg-success-strong: var(--color-emerald-900);
53
+ --color-fg-danger: var(--color-rose-700);
54
+ --color-fg-danger-strong: var(--color-rose-900);
55
+ --color-fg-warning-subtle: var(--color-orange-600);
56
+ --color-fg-warning: var(--color-orange-900);
57
+ --color-fg-yellow: var(--color-yellow-400);
58
+ --color-fg-disabled: var(--color-gray-400);
59
+ --color-fg-purple: var(--color-purple-600);
60
+ --color-fg-cyan: var(--color-cyan-600);
61
+ --color-fg-indigo: var(--color-indigo-600);
62
+ --color-fg-pink: var(--color-pink-600);
63
+ --color-fg-lime: var(--color-lime-600);
64
+
65
+ /* BACKGROUND COLOR VARIABLES */
66
+ /* used for neutral colors */
67
+ --color-neutral-primary-soft: var(--color-white);
68
+ --color-neutral-primary: var(--color-white);
69
+ --color-neutral-primary-medium: var(--color-white);
70
+ --color-neutral-primary-strong: var(--color-white);
71
+ --color-neutral-secondary-soft: var(--color-gray-50);
72
+ --color-neutral-secondary: var(--color-gray-50);
73
+ --color-neutral-secondary-medium: var(--color-gray-50);
74
+ --color-neutral-secondary-strong: var(--color-gray-50);
75
+ --color-neutral-secondary-strongest: var(--color-gray-50);
76
+ --color-neutral-tertiary-soft: var(--color-gray-100);
77
+ --color-neutral-tertiary: var(--color-gray-100);
78
+ --color-neutral-tertiary-medium: var(--color-gray-100);
79
+ --color-neutral-quaternary: var(--color-gray-200);
80
+ --color-neutral-quaternary-medium: var(--color-gray-200);
81
+ --color-gray: var(--color-gray-300);
82
+
83
+ /* used for brand colors */
84
+ --color-brand-softer: var(--color-blue-50);
85
+ --color-brand-soft: var(--color-blue-100);
86
+ --color-brand: var(--color-blue-700);
87
+ --color-brand-medium: var(--color-blue-200);
88
+ --color-brand-strong: var(--color-blue-800);
89
+
90
+ /* used for status colors */
91
+ --color-success-soft: var(--color-emerald-50);
92
+ --color-success: var(--color-emerald-700);
93
+ --color-success-medium: var(--color-emerald-100);
94
+ --color-success-strong: var(--color-emerald-800);
95
+ --color-danger-soft: var(--color-rose-50);
96
+ --color-danger: var(--color-rose-700);
97
+ --color-danger-medium: var(--color-rose-100);
98
+ --color-danger-strong: var(--color-rose-800);
99
+ --color-warning-soft: var(--color-orange-50);
100
+ --color-warning: var(--color-orange-500);
101
+ --color-warning-medium: var(--color-orange-100);
102
+ --color-warning-strong: var(--color-orange-700);
103
+ --color-dark-soft: var(--color-gray-800);
104
+ --color-dark: var(--color-gray-800);
105
+ --color-dark-strong: var(--color-gray-900);
106
+ --color-disabled: var(--color-gray-100);
107
+ --color-purple: var(--color-purple-500);
108
+ --color-sky: var(--color-sky-500);
109
+ --color-teal: var(--color-teal-600);
110
+ --color-pink: var(--color-pink-600);
111
+ --color-cyan: var(--color-cyan-500);
112
+ --color-fuchsia: var(--color-fuchsia-600);
113
+ --color-indigo: var(--color-indigo-600);
114
+ --color-orange: var(--color-orange-400);
115
+
116
+ /* BORDER COLOR VARIABLES */
117
+ --color-buffer: var(--color-white);
118
+ --color-buffer-medium: var(--color-white);
119
+ --color-buffer-strong: var(--color-white);
120
+ --color-muted: var(--color-gray-50);
121
+ --color-light-subtle: var(--color-gray-100);
122
+ --color-light: var(--color-gray-100);
123
+ --color-light-medium: var(--color-gray-100);
124
+ --color-default-subtle: var(--color-gray-200);
125
+ --color-default: var(--color-gray-200);
126
+ --color-default-medium: var(--color-gray-200);
127
+ --color-default-strong: var(--color-gray-200);
128
+
129
+ /* used for status colors */
130
+ --color-success-subtle: var(--color-emerald-200);
131
+ --color-danger-subtle: var(--color-rose-200);
132
+ --color-warning-subtle: var(--color-orange-200);
133
+ --color-brand-subtle: var(--color-blue-200);
134
+ --color-brand-light: var(--color-blue-600);
135
+ --color-dark-subtle: var(--color-gray-800);
136
+ --color-dark-backdrop: var(--color-gray-950);
137
+
138
+ /* shiki variables */
139
+ --color-shiki-fg-brand: #79b8ff;
140
+ --color-shiki-fg-brand-subtle: #9ecbff;
141
+ }
142
+
143
+ .dark {
144
+ /* text color variables */
145
+ --color-body: var(--color-gray-400);
146
+ --color-body-subtle: var(--color-gray-400);
147
+ --color-heading: var(--color-white);
148
+ --color-fg-brand-subtle: var(--color-blue-200);
149
+ --color-fg-brand: var(--color-blue-500);
150
+ --color-fg-brand-strong: var(--color-blue-400);
151
+ --color-fg-success: var(--color-emerald-600);
152
+ --color-fg-success-strong: var(--color-emerald-300);
153
+ --color-fg-danger: var(--color-rose-500);
154
+ --color-fg-danger-strong: var(--color-rose-300);
155
+ --color-fg-warning-subtle: var(--color-orange-500);
156
+ --color-fg-warning: var(--color-orange-300);
157
+ --color-fg-yellow: var(--color-yellow-400);
158
+ --color-fg-disabled: var(--color-gray-600);
159
+ --color-fg-purple: var(--color-purple-500);
160
+ --color-fg-cyan: var(--color-cyan-500);
161
+ --color-fg-indigo: var(--color-indigo-500);
162
+ --color-fg-pink: var(--color-pink-500);
163
+ --color-fg-lime: var(--color-lime-500);
164
+
165
+ /* background color variables */
166
+ --color-neutral-primary-soft: var(--color-gray-900);
167
+ --color-neutral-primary: var(--color-gray-950);
168
+ --color-neutral-primary-medium: var(--color-gray-800);
169
+ --color-neutral-primary-strong: var(--color-gray-700);
170
+ --color-neutral-secondary-soft: var(--color-gray-900);
171
+ --color-neutral-secondary: var(--color-gray-950);
172
+ --color-neutral-secondary-medium: var(--color-gray-800);
173
+ --color-neutral-secondary-strong: var(--color-gray-700);
174
+ --color-neutral-secondary-strongest: var(--color-gray-600);
175
+ --color-neutral-tertiary-soft: var(--color-gray-900);
176
+ --color-neutral-tertiary: var(--color-gray-800);
177
+ --color-neutral-tertiary-medium: var(--color-gray-700);
178
+ --color-neutral-quaternary: var(--color-gray-700);
179
+ --color-neutral-quaternary-medium: var(--color-gray-600);
180
+ --color-gray: var(--color-gray-600);
181
+ --color-brand-softer: var(--color-blue-950);
182
+ --color-brand-soft: var(--color-blue-900);
183
+ --color-brand: var(--color-blue-600);
184
+ --color-brand-medium: var(--color-blue-900);
185
+ --color-brand-strong: var(--color-blue-700);
186
+ --color-success-soft: var(--color-emerald-950);
187
+ --color-success: var(--color-emerald-600);
188
+ --color-success-medium: var(--color-emerald-900);
189
+ --color-success-strong: var(--color-emerald-700);
190
+ --color-danger-soft: var(--color-rose-950);
191
+ --color-danger: var(--color-rose-700);
192
+ --color-danger-medium: var(--color-rose-900);
193
+ --color-danger-strong: var(--color-rose-800);
194
+ --color-warning-soft: var(--color-orange-950);
195
+ --color-warning: var(--color-orange-600);
196
+ --color-warning-medium: var(--color-orange-900);
197
+ --color-warning-strong: var(--color-orange-700);
198
+ --color-dark-soft: var(--color-gray-700);
199
+ --color-dark: var(--color-gray-800);
200
+ --color-dark-strong: var(--color-gray-700);
201
+ --color-disabled: var(--color-gray-800);
202
+ --color-purple: var(--color-purple-500);
203
+ --color-sky: var(--color-sky-500);
204
+ --color-teal: var(--color-teal-500);
205
+ --color-pink: var(--color-pink-500);
206
+ --color-cyan: var(--color-cyan-500);
207
+ --color-fuchsia: var(--color-fuchsia-500);
208
+ --color-indigo: var(--color-indigo-500);
209
+ --color-orange: var(--color-orange-400);
210
+
211
+ /* border color variables */
212
+ --color-buffer: var(--color-gray-950);
213
+ --color-buffer-medium: var(--color-gray-900);
214
+ --color-buffer-strong: var(--color-gray-800);
215
+ --color-muted: var(--color-gray-900);
216
+ --color-light-subtle: var(--color-gray-900);
217
+ --color-light: var(--color-gray-800);
218
+ --color-light-medium: var(--color-gray-700);
219
+ --color-default-subtle: var(--color-gray-900);
220
+ --color-default: var(--color-gray-800);
221
+ --color-default-medium: var(--color-gray-700);
222
+ --color-default-strong: var(--color-gray-600);
223
+ --color-success-subtle: var(--color-emerald-900);
224
+ --color-danger-subtle: var(--color-rose-900);
225
+ --color-warning-subtle: var(--color-orange-900);
226
+ --color-brand-subtle: var(--color-blue-900);
227
+ --color-brand-light: var(--color-blue-600);
228
+ --color-dark-subtle: var(--color-gray-700);
229
+ --color-dark-backdrop: var(--color-gray-950);
230
+ }
231
+ ```
package/data/toc.md ADDED
@@ -0,0 +1,79 @@
1
+ ### UI components
2
+
3
+ - [Accordion](https://flowbite.com/docs/components/accordion/)
4
+ - [Alerts](https://flowbite.com/docs/components/alerts/)
5
+ - [Avatar](https://flowbite.com/docs/components/avatar/)
6
+ - [Badges](https://flowbite.com/docs/components/badge/)
7
+ - [Banner](https://flowbite.com/docs/components/banner/)
8
+ - [Bottom navigation](https://flowbite.com/docs/components/bottom-navigation/)
9
+ - [Breadcrumbs](https://flowbite.com/docs/components/breadcrumb/)
10
+ - [Buttons](https://flowbite.com/docs/components/buttons/)
11
+ - [Button group](https://flowbite.com/docs/components/button-group/)
12
+ - [Cards](https://flowbite.com/docs/components/card/)
13
+ - [Carousel](https://flowbite.com/docs/components/carousel/)
14
+ - [Chat bubble](https://flowbite.com/docs/components/chat-bubble/)
15
+ - [Clipboard](https://flowbite.com/docs/components/clipboard/)
16
+ - [Datepicker](https://flowbite.com/docs/components/datepicker/)
17
+ - [Device mockups](https://flowbite.com/docs/components/device-mockups/)
18
+ - [Drawer](https://flowbite.com/docs/components/drawer/)
19
+ - [Dropdowns](https://flowbite.com/docs/components/dropdowns/)
20
+ - [Footer](https://flowbite.com/docs/components/footer/)
21
+ - [Forms](https://flowbite.com/docs/components/forms/)
22
+ - [Gallery](https://flowbite.com/docs/components/gallery/)
23
+ - [Indicators](https://flowbite.com/docs/components/indicators/)
24
+ - [Jumbotron](https://flowbite.com/docs/components/jumbotron/)
25
+ - [KBD](https://flowbite.com/docs/components/kbd/)
26
+ - [List group](https://flowbite.com/docs/components/list-group/)
27
+ - [Mega menu](https://flowbite.com/docs/components/mega-menu/)
28
+ - [Modal](https://flowbite.com/docs/components/modal/)
29
+ - [Navbar](https://flowbite.com/docs/components/navbar/)
30
+ - [Pagination](https://flowbite.com/docs/components/pagination/)
31
+ - [Popover](https://flowbite.com/docs/components/popover/)
32
+ - [Progress bar](https://flowbite.com/docs/components/progress/)
33
+ - [Rating](https://flowbite.com/docs/components/rating/)
34
+ - [Sidebar](https://flowbite.com/docs/components/sidebar/)
35
+ - [Skeleton](https://flowbite.com/docs/components/skeleton/)
36
+ - [Speed dial](https://flowbite.com/docs/components/speed-dial/)
37
+ - [Spinner](https://flowbite.com/docs/components/spinner/)
38
+ - [Stepper](https://flowbite.com/docs/components/stepper/)
39
+ - [Tables](https://flowbite.com/docs/components/tables/)
40
+ - [Tabs](https://flowbite.com/docs/components/tabs/)
41
+ - [Timeline](https://flowbite.com/docs/components/timeline/)
42
+ - [Toast](https://flowbite.com/docs/components/toast/)
43
+ - [Tooltips](https://flowbite.com/docs/components/tooltips/)
44
+ - [Typography](https://flowbite.com/docs/components/typography/)
45
+ - [QR code](https://flowbite.com/docs/components/qr-code/)
46
+ - [Video](https://flowbite.com/docs/components/video/)
47
+
48
+ ### Form components
49
+
50
+ - [Input fields](https://flowbite.com/docs/forms/input-field/)
51
+ - [File input](https://flowbite.com/docs/forms/file-input/)
52
+ - [Search input](https://flowbite.com/docs/forms/search-input/)
53
+ - [Number input](https://flowbite.com/docs/forms/number-input/)
54
+ - [Phone input](https://flowbite.com/docs/forms/phone-input/)
55
+ - [Select input](https://flowbite.com/docs/forms/select/)
56
+ - [Textarea](https://flowbite.com/docs/forms/textarea/)
57
+ - [Timepicker](https://flowbite.com/docs/forms/timepicker/)
58
+ - [Checkbox](https://flowbite.com/docs/forms/checkbox/)
59
+ - [Radio](https://flowbite.com/docs/forms/radio/)
60
+ - [Toggle](https://flowbite.com/docs/forms/toggle/)
61
+ - [Range](https://flowbite.com/docs/forms/range/)
62
+ - [Floating label](https://flowbite.com/docs/forms/floating-label/)
63
+
64
+ ### Typography
65
+
66
+ - [Headings](https://flowbite.com/docs/typography/headings/)
67
+ - [Paragraphs](https://flowbite.com/docs/typography/paragraphs/)
68
+ - [Blockquote](https://flowbite.com/docs/typography/blockquote/)
69
+ - [Images](https://flowbite.com/docs/typography/images/)
70
+ - [Lists](https://flowbite.com/docs/typography/lists/)
71
+ - [Links](https://flowbite.com/docs/typography/links/)
72
+ - [Text](https://flowbite.com/docs/typography/text/)
73
+ - [HR](https://flowbite.com/docs/typography/hr/)
74
+
75
+ ### Plugins
76
+
77
+ - [Charts](https://flowbite.com/docs/plugins/charts/)
78
+ - [Datatables](https://flowbite.com/docs/plugins/datatables/)
79
+ - [WYSIWYG](https://flowbite.com/docs/plugins/wysiwyg/)
package/data/typography/blockquote.md ADDED
@@ -0,0 +1,182 @@
1
+ ---
2
+ layout: docs
3
+ title: Tailwind CSS Blockquote - Flowbite
4
+ description: The blockquote component can be used to quote text content from an external source that can be used for testimonials, reviews, and quotes inside an article
5
+ group: typography
6
+ toc: true
7
+
8
+ previous: Paragraphs
9
+ previousLink: typography/paragraphs/
10
+ next: Images
11
+ nextLink: typography/images/
12
+ ---
13
+
14
+ Get started with a collection of blockquote components when quoting external sources such as quotes inside an article, user reviews, and testimonials based on multiple examples of layouts, styles, and contexts.
15
+
16
+ The main `<blockquote>` HTML tag can be used together with the `<cite>` tag or attribute to also mention the source of the quote content.
17
+
18
+ ## Default blockquote
19
+
20
+ Use this example to quote an external source inside a blockquote element.
21
+
22
+ {{< example github="typography/blockquote.md" show_dark=true >}}
23
+ <blockquote class="text-xl italic font-semibold tracking-tight text-heading">
24
+ <p>"Flowbite is just awesome. It contains tons of predesigned pages starting from login screen to complex dashboard. Best choice for your SaaS application."</p>
25
+ </blockquote>
26
+ {{< /example >}}
27
+
28
+ ## Solid background
29
+
30
+ This example can be used as an alternative style to the default one by applying a solid background color.
31
+
32
+ {{< example github="typography/blockquote.md" show_dark=true >}}
33
+ <p class="text-body">
34
+ Does your user know how to exit out of screens? Can they follow your intended user journey and buy something from the site you’ve designed? By running a usability test, you’ll be able to see how users will interact with your design once it’s live.
35
+ </p>
36
+ <blockquote class="p-4 my-4 border-s-4 border-default bg-neutral-secondary-soft">
37
+ <p class="text-xl italic font-medium leading-relaxed text-heading">"Flowbite is just awesome. It contains tons of predesigned components and pages starting from login screen to complex dashboard. Perfect choice for your next SaaS application."</p>
38
+ </blockquote>
39
+ <p class="text-body">
40
+ First of all you need to understand how Flowbite works. This library is not another framework. Rather, it is a set of components based on Tailwind CSS that you can just copy-paste from the documentation.
41
+ </p>
42
+ {{< /example >}}
43
+
44
+ ## Blockquote icon
45
+
46
+ Use this example to show an icon above the blockquote text content.
47
+
48
+ {{< example github="typography/blockquote.md" show_dark=true >}}
49
+ <blockquote class="text-xl italic font-semibold text-heading tracking-tight">
50
+ <svg class="w-9 h-9 text-heading mb-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11V8a1 1 0 0 0-1-1H6a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1Zm0 0v2a4 4 0 0 1-4 4H5m14-6V8a1 1 0 0 0-1-1h-3a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1Zm0 0v2a4 4 0 0 1-4 4h-1"/></svg>
51
+ <p>"Flowbite is just awesome. It contains tons of predesigned components and pages starting from login screen to complex dashboard. Perfect choice for your next SaaS application."</p>
52
+ </blockquote>
53
+ {{< /example >}}
54
+
55
+ ## Paragraph context
56
+
57
+ Use this example to show a blockquote component between multiple paragraph elements.
58
+
59
+ {{< example github="typography/blockquote.md" show_dark=true >}}
60
+ <p class="mb-3 text-body">Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</p>
61
+ <div class="grid grid-cols-1 md:gap-6 md:grid-cols-2">
62
+ <p class="mb-3 text-body">Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</p>
63
+ <blockquote class="mb-3">
64
+ <p class="text-xl italic font-semibold text-heading">" Flowbite is just awesome. It contains tons of predesigned components and pages starting from login screen to complex dashboard. Perfect choice for your next SaaS application. "</p>
65
+ </blockquote>
66
+ </div>
67
+ <p class="mb-3 text-body">Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.</p>
68
+ {{< /example >}}
69
+
70
+ ## User testimonial
71
+
72
+ This example can be used for user testimonials by mentioning the author and occupation of the author.
73
+
74
+ {{< example github="typography/blockquote.md" show_dark=true >}}
75
+ <figure class="max-w-screen-md mx-auto text-center">
76
+ <svg class="w-11 h-11 text-heading mb-4 mx-auto" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11V8a1 1 0 0 0-1-1H6a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1Zm0 0v2a4 4 0 0 1-4 4H5m14-6V8a1 1 0 0 0-1-1h-3a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1Zm0 0v2a4 4 0 0 1-4 4h-1"/></svg>
77
+ <blockquote>
78
+ <p class="text-2xl italic font-semibold tracking-tight text-heading">"Flowbite is just awesome. It contains tons of predesigned components and pages starting from login screen to complex dashboard. Perfect choice for your next SaaS application."</p>
79
+ </blockquote>
80
+ <figcaption class="flex items-center justify-center mt-6 space-x-3 rtl:space-x-reverse">
81
+ <img class="w-6 h-6 rounded-full" src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/michael-gouch.png" alt="profile picture">
82
+ <div class="flex items-center divide-x rtl:divide-x-reverse divide-default">
83
+ <cite class="pe-3 font-medium text-heading">Michael Gough</cite>
84
+ <cite class="ps-3 text-sm text-body">CEO at Google</cite>
85
+ </div>
86
+ </figcaption>
87
+ </figure>
88
+ {{< /example >}}
89
+
90
+ ## User Review
91
+
92
+ Use this example to show a user review with rating stars and the name and occupation of the author.
93
+
94
+ {{< example github="typography/blockquote.md" show_dark=true >}}
95
+ <figure class="max-w-screen-md">
96
+ <div class="flex items-center space-x-1 mb-4">
97
+ <svg class="w-5 h-5 text-fg-yellow" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M13.849 4.22c-.684-1.626-3.014-1.626-3.698 0L8.397 8.387l-4.552.361c-1.775.14-2.495 2.331-1.142 3.477l3.468 2.937-1.06 4.392c-.413 1.713 1.472 3.067 2.992 2.149L12 19.35l3.897 2.354c1.52.918 3.405-.436 2.992-2.15l-1.06-4.39 3.468-2.938c1.353-1.146.633-3.336-1.142-3.477l-4.552-.36-1.754-4.17Z"/></svg>
98
+ <svg class="w-5 h-5 text-fg-yellow" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M13.849 4.22c-.684-1.626-3.014-1.626-3.698 0L8.397 8.387l-4.552.361c-1.775.14-2.495 2.331-1.142 3.477l3.468 2.937-1.06 4.392c-.413 1.713 1.472 3.067 2.992 2.149L12 19.35l3.897 2.354c1.52.918 3.405-.436 2.992-2.15l-1.06-4.39 3.468-2.938c1.353-1.146.633-3.336-1.142-3.477l-4.552-.36-1.754-4.17Z"/></svg>
99
+ <svg class="w-5 h-5 text-fg-yellow" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M13.849 4.22c-.684-1.626-3.014-1.626-3.698 0L8.397 8.387l-4.552.361c-1.775.14-2.495 2.331-1.142 3.477l3.468 2.937-1.06 4.392c-.413 1.713 1.472 3.067 2.992 2.149L12 19.35l3.897 2.354c1.52.918 3.405-.436 2.992-2.15l-1.06-4.39 3.468-2.938c1.353-1.146.633-3.336-1.142-3.477l-4.552-.36-1.754-4.17Z"/></svg>
100
+ <svg class="w-5 h-5 text-fg-yellow" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M13.849 4.22c-.684-1.626-3.014-1.626-3.698 0L8.397 8.387l-4.552.361c-1.775.14-2.495 2.331-1.142 3.477l3.468 2.937-1.06 4.392c-.413 1.713 1.472 3.067 2.992 2.149L12 19.35l3.897 2.354c1.52.918 3.405-.436 2.992-2.15l-1.06-4.39 3.468-2.938c1.353-1.146.633-3.336-1.142-3.477l-4.552-.36-1.754-4.17Z"/></svg>
101
+ <svg class="w-5 h-5 text-fg-disabled" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M13.849 4.22c-.684-1.626-3.014-1.626-3.698 0L8.397 8.387l-4.552.361c-1.775.14-2.495 2.331-1.142 3.477l3.468 2.937-1.06 4.392c-.413 1.713 1.472 3.067 2.992 2.149L12 19.35l3.897 2.354c1.52.918 3.405-.436 2.992-2.15l-1.06-4.39 3.468-2.938c1.353-1.146.633-3.336-1.142-3.477l-4.552-.36-1.754-4.17Z"/></svg>
102
+ </div>
103
+ <blockquote>
104
+ <p class="text-2xl font-semibold text-heading tracking-tight">"Flowbite is just awesome. It contains tons of predesigned components and pages starting from login screen to complex dashboard. Perfect choice for your next SaaS application."</p>
105
+ </blockquote>
106
+ <figcaption class="flex items-center mt-6 space-x-3 rtl:space-x-reverse">
107
+ <img class="w-6 h-6 rounded-full" src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/bonnie-green.png" alt="profile picture">
108
+ <div class="flex items-center divide-x rtl:divide-x-reverse divide-default">
109
+ <cite class="pe-3 font-medium text-heading">Bonnie Green</cite>
110
+ <cite class="ps-3 text-sm text-body">CTO at Flowbite</cite>
111
+ </div>
112
+ </figcaption>
113
+ </figure>
114
+ {{< /example >}}
115
+
116
+ ## Alignment
117
+
118
+ Choose from the following examples the blockquote text alignment from starting from left, center to right based on the utility classes from Tailwind CSS.
119
+
120
+ ### Left
121
+
122
+ The default alignment of the blockquote text content is the left side of the document.
123
+
124
+ {{< example github="typography/blockquote.md" show_dark=true >}}
125
+ <blockquote class="text-xl italic font-semibold text-left text-heading">
126
+ <p>"Flowbite is just awesome. It contains tons of predesigned components and pages starting from login screen to complex dashboard. Perfect choice for your next SaaS application."</p>
127
+ </blockquote>
128
+ {{< /example >}}
129
+
130
+ ### Center
131
+
132
+ Use the `text-center` class from Tailwind CSS to align the text content inside the blockquote to the center.
133
+
134
+ {{< example github="typography/blockquote.md" show_dark=true >}}
135
+ <blockquote class="text-xl italic font-semibold text-center text-heading">
136
+ <p>"Flowbite is just awesome. It contains tons of predesigned components and pages starting from login screen to complex dashboard. Perfect choice for your next SaaS application."</p>
137
+ </blockquote>
138
+ {{< /example >}}
139
+
140
+ ### Right
141
+
142
+ Use the `text-right` utility class from Tailwind CSS to align the blockquote text content to the right side of the page.
143
+
144
+ {{< example github="typography/blockquote.md" show_dark=true >}}
145
+ <blockquote class="text-xl italic font-semibold text-right text-heading">
146
+ <p>"Flowbite is just awesome. It contains tons of predesigned components and pages starting from login screen to complex dashboard. Perfect choice for your next SaaS application."</p>
147
+ </blockquote>
148
+ {{< /example >}}
149
+
150
+ ## Sizes
151
+
152
+ Choose from one of the multiple sizes for the default blockquote component based on the surrounding elements and sizes.
153
+
154
+ ### Small
155
+
156
+ Use the `text-lg` font size class from Tailwind CSS to apply the small size for the blockquote component.
157
+
158
+ {{< example github="typography/blockquote.md" show_dark=true >}}
159
+ <blockquote class="text-lg italic font-semibold text-heading">
160
+ <p>"Flowbite is just awesome. It contains tons of predesigned components and pages starting from login screen to complex dashboard. Perfect choice for your next SaaS application."</p>
161
+ </blockquote>
162
+ {{< /example >}}
163
+
164
+ ### Medium
165
+
166
+ Use the `text-xl` utility class to set the default size for the blockquote element.
167
+
168
+ {{< example github="typography/blockquote.md" show_dark=true >}}
169
+ <blockquote class="text-xl italic font-semibold text-heading">
170
+ <p>"Flowbite is just awesome. It contains tons of predesigned components and pages starting from login screen to complex dashboard. Perfect choice for your next SaaS application."</p>
171
+ </blockquote>
172
+ {{< /example >}}
173
+
174
+ ### Large
175
+
176
+ The `text-2xl` class can be used to set a large size for the blockquote component.
177
+
178
+ {{< example github="typography/blockquote.md" show_dark=true >}}
179
+ <blockquote class="text-2xl italic font-semibold text-heading">
180
+ <p>"Flowbite is just awesome. It contains tons of predesigned components and pages starting from login screen to complex dashboard. Perfect choice for your next SaaS application."</p>
181
+ </blockquote>
182
+ {{< /example >}}