en.json

{
  "__name": "English",
  "__code": "EN",
  "__direction": "ltr",
  "__status": "",
  "Tailwind CSS Components": "Tailwind CSS Components",
  "cta-1": "See components",
  "cta-1-mobile": "Components",
  "cta-2": "How to use?",
  "components-btn": "Components",
  "change-theme-btn": "Theme",
  "all-components-btn": "See All Components",
  "components": "Components",
  "themes": "Themes",
  "github-stars": "Github Stars",
  "npm-installs": "NPM Installs",
  "install-title": "Install daisyUI",
  "install-desc": "Pure CSS. Works on all frameworks. daisyUI can be used as a Tailwind CSS plugin or as an independent CSS library",
  "install-step-1": "Install daisyUI as a Node package",
  "install-step-2": "Add daisyUI to tailwind.config.js",
  "install-btn": "Install guide",
  "footer-tagline": "Free Component library <br /> For utility first CSS frameworks",
  "pages": "pages",
  "how-to-install": "How to install",
  "how-to-use-components": "How to use components",
  "how-to-customize": "How to customize",
  "how-to-use-themes": "How to use themes",
  "color-system": "Color system",
  "config": "Config",
  "links": "Links",
  "changelog": "Changelog",
  "license": "License",
  "contributing": "Contributing",
  "available-on": "Available on",
  "try-online": "Try online",
  "created-by": "Created by",
  "Install": "Install",
  "Use": "Use",
  "Customize components": "Customize components",
  "Config": "Config",
  "Colors": "Colors",
  "Themes": "Themes",
  "Theme Generator": "Theme Generator",
  "Layout & Typography": "Layout & Typography",
  "Actions": "Actions",
  "Button": "Button",
  "Dropdown": "Dropdown",
  "Modal": "Modal",
  "Swap": "Swap",
  "Data display": "Data display",
  "Alert": "Alert",
  "Avatar": "Avatar",
  "Badge": "Badge",
  "Card": "Card",
  "Carousel": "Carousel",
  "Chat bubble": "Chat bubble",
  "Collapse": "Collapse",
  "Countdown": "Countdown",
  "Kbd": "Kbd",
  "Progress": "Progress",
  "Radial progress": "Radial progress",
  "Stat": "Stat",
  "Table": "Table",
  "Tooltip": "Tooltip",
  "Data input": "Data input",
  "Checkbox": "Checkbox",
  "Text input": "Text input",
  "Radio": "Radio",
  "Range": "Range",
  "Rating": "Rating",
  "Select": "Select",
  "Textarea": "Textarea",
  "Toggle": "Toggle",
  "Layout": "Layout",
  "Artboard": "Artboard",
  "Button group": "Button group",
  "Divider": "Divider",
  "Drawer": "Drawer",
  "Footer": "Footer",
  "Hero": "Hero",
  "Indicator": "Indicator",
  "Input group": "Input group",
  "Mask": "Mask",
  "Stack": "Stack",
  "Toast": "Toast",
  "Navigation": "Navigation",
  "Breadcrumbs": "Breadcrumbs",
  "Bottom navigation": "Bottom navigation",
  "Link": "Link",
  "Menu": "Menu",
  "Navbar": "Navbar",
  "Pagination": "Pagination",
  "Steps": "Steps",
  "Tab": "Tab",
  "Mockup": "Mockup",
  "Code": "Code",
  "Phone": "Phone",
  "Window": "Window",
  "excluded": "excluded",
  "CodePen example page": "CodePen example page",
  "Tailwind Play example page": "Tailwind Play example page",
  "new": "new",
  "updated": "updated",
  "Tailwind Plugin": "Tailwind Plugin",
  "Use CDN": "Use CDN",
  "Install daisyUI as a Tailwind CSS plugin": "Install daisyUI as a Tailwind CSS plugin",
  "You need <a target=_blank' href='https://nodejs.org/en/download/'>Node.js</a> and <a target='_blank' href='https://tailwindcss.com/docs/installation/'>Tailwind CSS</a> installed.": "You need <a target=_blank' href='https://nodejs.org/en/download/'>Node.js</a> and <a target='_blank' href='https://tailwindcss.com/docs/installation/'>Tailwind CSS</a> installed.",
  "How to install daisyUI as a Tailwind CSS plugin?": "How to install daisyUI as a Tailwind CSS plugin?",
  "Install daisyUI": "Install daisyUI",
  "Then add daisyUI to your <code>tailwind.config.js</code> files": "Then add daisyUI to your <code>tailwind.config.js</code> files",
  "daisyUI example repositories": "daisyUI example repositories",
  "See example setup of daisyUI and Tailwind CSS on different frameworks and build tools.": "See example setup of daisyUI and Tailwind CSS on different frameworks and build tools.",
  "Prev": "Prev",
  "Next": "Next",
  "Do you have a question?": "Do you have a question?",
  "Do you see a bug?": "Do you see a bug?",
  "Do you like daisyUI?": "Do you like daisyUI?",
  "Edit this page on GitHub": "Edit this page on GitHub",
  "ask the community": "ask the community",
  "open an issue on GitHub": "open an issue on GitHub",
  "tweet about it!": "tweet about it!",
  "Warning": "Warning",
  "CDN files are not recommended for production <br/>because you can't purge unused styles and file size will be large.": "CDN files are not recommended for production <br/>because you can't purge unused styles and file size will be large.",
  "You don't need to install anything.": "You don't need to install anything.",
  "Just add one of these to the <code>head</code> tag of your HTML": "Just add one of these to the <code>head</code> tag of your HTML",
  "Or": "Or",
  "Add component classes to your HTML": "Add component classes to your HTML",
  "How to use daisyUI classes to style your page?": "How to use daisyUI classes to style your page?",
  "Once you <a href='/docs/install/'>installed daisyUI</a>, you can use component classes like <code>btn</code>, <code>card</code>, etc.": "Once you <a href='/docs/install/'>installed daisyUI</a>, you can use component classes like <code>btn</code>, <code>card</code>, etc.",
  "So instead of making a button using only utility classes": "So instead of making a button using only utility classes",
  "You can just use a component class like this": "You can just use a component class like this",
  "Then you can modify the component with daisyUI additional utility classes": "Then you can modify the component with daisyUI additional utility classes",
  "Or you can modify the component with Tailwind CSS utility classes": "Or you can modify the component with Tailwind CSS utility classes",
  "Customize daisyUI components": "Customize daisyUI components",
  "How to customize daisyUI?": "How to customize daisyUI?",
  "daisyUI components come with many variants necessary for design systems and you won't usually need to customize anything.": "daisyUI components come with many variants necessary for design systems and you won't usually need to customize anything.",
  "But you can still customize components in many ways.": "But you can still customize components in many ways.",
  "Let's say, you want to customize this button:": "Let's say, you want to customize this button:",
  "You can use daisyUI utility classes:": "You can use daisyUI utility classes:",
  "You can use Tailwind's utility classes:": "You can use Tailwind's utility classes:",
  "You can customize components on your CSS file, using Tailwind's @apply directive:": "You can customize components on your CSS file, using Tailwind's @apply directive:",
  "You can also:": "You can also:",
  "Add your own theme.": "Add your own theme.",
  "Opt out of daisyUI's design decisions, and <a href='/docs/config/'>only use an unstyled (skeleton) version of daisyUI</a>.": "Opt out of daisyUI's design decisions, and <a href='/docs/config/'>only use an unstyled (skeleton) version of daisyUI</a>.",
  "How to change the default configuration of daisyUI?": "How to change the default configuration of daisyUI?",
  "daisyUI can be configured from your <code>tailwind.config.js</code> file.": "daisyUI can be configured from your <code>tailwind.config.js</code> file.",
  "Default config": "Default config",
  "Config values explained": "Config values explained",
  "If it's true, components will have colors and style so you won't need to design anything.": "If it's true, components will have colors and style so you won't need to design anything.",
  "If it's false, components will have no color and no visual style so you can design your own style on a basic skeleton.": "If it's false, components will have no color and no visual style so you can design your own style on a basic skeleton.",
  "If it's true, all themes will be included.": "If it's true, all themes will be included.",
  "If it's false, only light and dark themes will be available.": "If it's false, only light and dark themes will be available.",
  "If it's an array, only themes in the array will be included and the first theme will be the default theme.": "If it's an array, only themes in the array will be included and the first theme will be the default theme.",
  "Read more about <a href='/docs/themes/'>themes</a>.": "Read more about <a href='/docs/themes/'>themes</a>.",
  "If it's true, <a href='https://github.com/saadeghi/daisyui/blob/master/src/base'>a few base styles</a> will be added.": "If it's true, <a href='https://github.com/saadeghi/daisyui/blob/master/src/base'>a few base styles</a> will be added.",
  "If it's true, <a href='https://github.com/saadeghi/daisyui/tree/master/src/utilities'>responsive and utility classes</a> will be added.": "If it's true, <a href='https://github.com/saadeghi/daisyui/tree/master/src/utilities'>responsive and utility classes</a> will be added.",
  "If it's true, daisyUI shows logs in the terminal while CSS is building.": "If it's true, daisyUI shows logs in the terminal while CSS is building.",
  "If it's true, your theme will be right-to-left. You need to add <code>dir='rtl'</code> to your body tag.": "If it's true, your theme will be right-to-left. You need to add <code>dir='rtl'</code> to your body tag.",
  "If you're using daisyUI with RTL option, I suggest using <a href='https://github.com/cvrajeesh/tailwindcss-flip'>tailwindcss-flip</a> plugin because to flip all your Tailwind utilities automatically.": "If you're using daisyUI with RTL option, I suggest using <a href='https://github.com/cvrajeesh/tailwindcss-flip'>tailwindcss-flip</a> plugin to flip all your Tailwind utilities automatically.",
  "Allows us to pick another theme for system's auto dark mode. By default, <code>dark</code> theme (or a custom theme named <code>dark</code>) will be the default theme if no theme is specified and the user is using dark mode on their system. With this config, you can set another theme to be the default dark mode theme.": "Allows us to pick another theme for system's auto dark mode. By default, <code>dark</code> theme (or a custom theme named <code>dark</code>) will be the default theme if no theme is specified and the user is using dark mode on their system. With this config, you can set another theme to be the default dark mode theme.",
  "Adds a prefix to class name for all daisyUI classes (including component classes, modifier classes and responsive classes).": "Adds a prefix to class name for all daisyUI classes (including component classes, modifier classes and responsive classes).",
  "For example: <code>btn</code> will become <code>prefix-btn</code>.": "For example: <code>btn</code> will become <code>prefix-btn</code>.",
  "If you're using a second CSS library that has similar class names, you can use this config to avoid conflicts.": "If you're using a second CSS library that has similar class names, you can use this config to avoid conflicts.",
  "Utility classes like color names (e.g. <code>bg-primary</code>) or border-radius (e.g. <code>rounded-box</code>) will not be affected by this config because they're being added as extensions to Tailwind CSS classes.": "Utility classes like color names (e.g. <code>bg-primary</code>) or border-radius (e.g. <code>rounded-box</code>) will not be affected by this config because they're being added as extensions to Tailwind CSS classes.",
  "If you use daisyUI <code>prefix</code> option (like <code>daisy-</code>) and Tailwind CSS <code>prefix</code> option (like <code>tw-</code>) together, classnames will be prefixed like this: <code>tw-daisy-btn</code>.": "If you use daisyUI <code>prefix</code> option (like <code>daisy-</code>) and Tailwind CSS <code>prefix</code> option (like <code>tw-</code>) together, classnames will be prefixed like this: <code>tw-daisy-btn</code>.",
  "How to use daisyUI colors?": "How to use daisyUI colors?",
  "Introduction": "Introduction",
  "daisyUI is fully themeable and colorable,": "daisyUI is fully themeable and colorable,",
  "So instead of using constant color utility classes like:": "So instead of using constant color utility classes like:",
  "It's suggested to use semantic color utility classes like:": "It's suggested to use semantic color utility classes like:",
  "Each color name contains CSS variables and each daisyUI theme applies color values to the utility classes when it is applied.": "Each color name contains CSS variables and each daisyUI theme applies color values to the utility classes when it is applied.",
  "Benefits": "Benefits",
  "Semantic color names make more sense because when we design interfaces, we don't just use any random color. We define a specific color palette with names like <code>primary</code>, <code>secondary</code>, etc. and we only use those specific colors in our interfaces.": "Semantic color names make more sense because when we design interfaces, we don't just use any random color. We define a specific color palette with names like <code>primary</code>, <code>secondary</code>, etc. and we only use those specific colors in our interfaces.",
  "Also, using semantic color names makes theming easier. You wouldn't have to define dark-mode colors for every single element and you wouldn't be limited to only light/dark themes. you can have multiple themes available and each theme is just a few lines of CSS variables.": "Also, using semantic color names makes theming easier. You wouldn't have to define dark-mode colors for every single element and you wouldn't be limited to only light/dark themes. you can have multiple themes available and each theme is just a few lines of CSS variables.",
  "List of all daisyUI color names": "List of all daisyUI color names",
  "You can use these color names in your theme or in utility classes.": "You can use these color names in your theme or in utility classes.",
  "Color name + description": "Color name + description",
  "Required or optional for themes": "Required or optional for themes",
  "Example use": "Example use",
  "How to use": "How to use",
  "Some daisyUI components come with modifier class names and that modifier class name will apply a color.": "Some daisyUI components come with modifier class names and that modifier class name will apply a color.",
  "For example": "For example",
  "You can also use color names in utility classes just like Tailwind's original color names.": "You can also use color names in utility classes just like Tailwind's original color names.",
  "These are utility classes that can be used with a color name:": "These are utility classes that can be used with a color name:",
  "So you can use <code>bg-primary</code>, <code>border-secondary</code>, etc.": "So you can use <code>bg-primary</code>, <code>border-secondary</code>, etc.",
  "daisyUI comes with a number of themes, which you can use with no extra effort.": "daisyUI comes with a number of themes, which you can use with no extra effort.",
  "Each theme defines a set of colors which will be used on all daisyUI elements.": "Each theme defines a set of colors which will be used on all daisyUI elements.",
  "To use a theme, add its name in <span class=badge>tailwind.config.js</span> and activate it by adding <span class=badge>data-theme</span> attribute to <span class=badge>HTML</span> tag:": "To use a theme, add its name in <span class=badge>tailwind.config.js</span> and activate it by adding <span class=badge>data-theme</span> attribute to <span class=badge>HTML</span> tag:",
  "I suggest using <a href='https://github.com/saadeghi/theme-change'><code>theme-change</code></a>, so you can switch themes and save selected theme in local storage.": "I suggest using <a href='https://github.com/saadeghi/theme-change'><code>theme-change</code></a>, so you can switch themes and save selected theme in local storage.",
  "List of themes": "List of themes",
  "Try them:": "Try them:",
  "The default theme is <code>light</code> (or <code>dark</code> for dark mode)": "The default theme is <code>light</code> (or <code>dark</code> for dark mode)",
  "but you can <a href='https://daisyui.com/docs/config/'>change the default theme from tailwind.config.js</a>": "but you can <a href='https://daisyui.com/docs/config/'>change the default theme from tailwind.config.js</a>",
  "How to remove unused themes?": "How to remove unused themes?",
  "You can only include the themes you want in your project.": "You can only include the themes you want in your project.",
  "This will reduce the size of your CSS file.": "This will reduce the size of your CSS file.",
  "In the below example": "In the below example",
  "<code>cupcake</code> will be the default theme for light mode": "<code>cupcake</code> will be the default theme for light mode",
  "<code>dark</code> will be the default theme for dark mode": "<code>dark</code> will be the default theme for dark mode",
  "<code>cmyk</code> can be applied on any HTML tag with <code>data-theme='cmyk'</code>": "<code>cmyk</code> can be applied on any HTML tag with <code>data-theme='cmyk'</code>",
  "How to disable all themes?": "How to disable all themes?",
  "If you only want the default light and dark themes, set <code>themes</code> config to false.": "If you only want the default light and dark themes, set <code>themes</code> config to false.",
  "If you don't want to include any themes and disable all colors, set <code>themes</code> config to an empty array.": "If you don't want to include any themes and disable all colors, set <code>themes</code> config to an empty array.",
  "How to use a theme only for a section of a page?": "How to use a theme only for a section of a page?",
  "Add <code>data-theme='THEME_NAME'</code> to any element and everything inside will have your theme.": "Add <code>data-theme='THEME_NAME'</code> to any element and everything inside will have your theme.",
  "You can nest themes and there is no limit!": "You can nest themes and there is no limit!",
  "You can force a section of your HTML to only use a specific theme.": "You can force a section of your HTML to only use a specific theme.",
  "How to add a new custom theme?": "How to add a new custom theme?",
  "You can add a new theme from <code>tailwind.config.js</code> file.": "You can add a new theme from <code>tailwind.config.js</code> file.",
  "In the below example, I added a new theme called <code>mytheme</code> and I'm also including <code>dark</code> and <code>cupcake</code> themes.": "In the below example, I added a new theme called <code>mytheme</code> and I'm also including <code>dark</code> and <code>cupcake</code> themes.",
  "The first theme (<code>mytheme</code>) will be the default theme.": "The first theme (<code>mytheme</code>) will be the default theme.",
  "<code>dark</code> theme will be the default theme for dark mode.": "<code>dark</code> theme will be the default theme for dark mode.",
  "In the below example, I have the required colors. All other colors will be generated automatically (Like the color of button when you focus on it or the color of text on a <code>primary</code> button).": "In the below example, I have the required colors. All other colors will be generated automatically (Like the color of button when you focus on it or the color of text on a <code>primary</code> button).",
  "CSS variables in daisyUI themes": "CSS variables in daisyUI themes",
  "There are a few optional CSS variables that you can use in daisyUI themes to customize design decisions for each theme:": "There are a few optional CSS variables that you can use in daisyUI themes to customize design decisions for each theme:",
  "You can also add <a href='/docs/colors/' class='link'>optional color names</a> to have full control over all colors.": "You can also add <a href='/docs/colors/' class='link'>optional color names</a> to have full control over all colors.",
  "Custom CSS for a daisyUI theme": "Custom CSS for a daisyUI theme",
  "You can apply custom style to a daisyUI themes using CSS:": "You can apply custom style to a daisyUI themes using CSS:",
  "How to customize an existing theme?": "How to customize an existing theme?",
  "In your tailwind.config.js, you can require an existing daisyUI theme and override some colors.": "In your tailwind.config.js, you can require an existing daisyUI theme and override some colors.",
  "In the below example, I require and spread <code>light</code> theme and change its <code>primary</code> and <code>secondary</code> colors:": "In the below example, I require and spread <code>light</code> theme and change its <code>primary</code> and <code>secondary</code> colors:",
  "Contribute to translation": "Contribute to translation",
  "Alert informs users about important events.": "Alert informs users about important events.",
  "Artboard provides fixed size container to display a demo content on mobile size.": "Artboard provides fixed size container to display a demo content on mobile size.",
  "Avatars are used to show a thumbnail representation of an individual or business in the interface.": "Avatars are used to show a thumbnail representation of an individual or business in the interface.",
  "Badges are used to inform the user of the status of specific data.": "Badges are used to inform the user of the status of specific data.",
  "Bottom navigation bar allows navigation between primary screens.": "Bottom navigation bar allows navigation between primary screens.",
  "Breadcrumbs helps users to navigate through the website.": "Breadcrumbs helps users to navigate through the website.",
  "Button group shows buttons next to each other.": "Button group shows buttons next to each other.",
  "Buttons allow the user to take actions or make choices.": "Buttons allow the user to take actions or make choices.",
  "Cards are used to group and display content in a way that is easily readable.": "Cards are used to group and display content in a way that is easily readable.",
  "Carousel show images or content in a scrollable area.": "Carousel show images or content in a scrollable area.",
  "Chat bubbles are used to show one line of conversation and all its data, including the author image, author name, time, etc.": "Chat bubbles are used to show one line of conversation and all its data, including the author image, author name, time, etc.",
  "Checkboxes are used to select or deselect a value.": "Checkboxes are used to select or deselect a value.",
  "Collapse is used for showing and hiding content.": "Collapse is used for showing and hiding content.",
  "Countdown gives you a transition effect of changing numbers.": "Countdown gives you a transition effect of changing numbers.",
  "Divider will be used to separate content vertically or horizontally.": "Divider will be used to separate content vertically or horizontally.",
  "Drawer is a grid layout that can show/hide a sidebar on the left or right side of the page.": "Drawer is a grid layout that can show/hide a sidebar on the left or right side of the page.",
  "Dropdown can open a menu or any other element when the button is clicked.": "Dropdown can open a menu or any other element when the button is clicked.",
  "File Input is a an input field for uploading files.": "File Input is a an input field for uploading files.",
  "Footer can contain logo, copyright notice, and links to other pages.": "Footer can contain logo, copyright notice, and links to other pages.",
  "Hero is a component for displaying a large box or image with a title and description.": "Hero is a component for displaying a large box or image with a title and description.",
  "Indicators are used to place an element on the corner of another element.": "Indicators are used to place an element on the corner of another element.",
  "Input group puts an input next to a text or a button.": "Input group puts an input next to a text or a button.",
  "Text Input is a simple input field.": "Text Input is a simple input field.",
  "Kbd is used to display keyboard shortcuts.": "Kbd is used to display keyboard shortcuts.",
  "Link adds the missing underline style to links.": "Link adds the missing underline style to links.",
  "Mask crops the content of the element to common shapes.": "Mask crops the content of the element to common shapes.",
  "Menu is used to display a list of links vertically or horizontally.": "Menu is used to display a list of links vertically or horizontally.",
  "Code mockup is used to show a block of code in a box that looks like a code editor.": "Code mockup is used to show a block of code in a box that looks like a code editor.",
  "Phone mockup shows a mockup of an iPhone.": "Phone mockup shows a mockup of an iPhone.",
  "Window mockup shows a box that looks like an operating system window.": "Window mockup shows a box that looks like an operating system window.",
  "Modal is used to show a dialog or a box when you click a button.": "Modal is used to show a dialog or a box when you click a button.",
  "Navbar is used to show a navigation bar on the top of the page.": "Navbar is used to show a navigation bar on the top of the page.",
  "Pagination is a group of buttons that allow the user to navigate between a set of related content.": "Pagination is a group of buttons that allow the user to navigate between a set of related content.",
  "Progress bar can be used to show the progress of a task or to show the passing of time.": "Progress bar can be used to show the progress of a task or to show the passing of time.",
  "Radial progress can be used to show the progress of a task or to show the passing of time.": "Radial progress can be used to show the progress of a task or to show the passing of time.",
  "Radio buttons allow the user to select one option from a set.": "Radio buttons allow the user to select one option from a set.",
  "Range slider is used to select a value by sliding a handle.": "Range slider is used to select a value by sliding a handle.",
  "Rating is a set of radio buttons that allow the user to rate something.": "Rating is a set of radio buttons that allow the user to rate something.",
  "Select is used to pick a value from a list of options.": "Select is used to pick a value from a list of options.",
  "Stack visually puts elements on top of each other.": "Stack visually puts elements on top of each other.",
  "Stat is used to show numbers and data in a box.": "Stat is used to show numbers and data in a box.",
  "Steps can be used to show a list of steps in a process.": "Steps can be used to show a list of steps in a process.",
  "Swap allows you to toggle the visibility of two elements using a checkbox or a class name.": "Swap allows you to toggle the visibility of two elements using a checkbox or a class name.",
  "Tabs can be used to show a list of links in a tabbed format.": "Tabs can be used to show a list of links in a tabbed format.",
  "Table can be used to show a list of data in a table format.": "Table can be used to show a list of data in a table format.",
  "Textarea allows users to enter text in multiple lines.": "Textarea allows users to enter text in multiple lines.",
  "Toggle is a checkbox that is styled to look like a switch button.": "Toggle is a checkbox that is styled to look like a switch button.",
  "Toast is a wrapper to stack elements, positioned on the corner of page.": "Toast is a wrapper to stack elements, positioned on the corner of page.",
  "Tooltip can be used to show a message when hovering over an element.": "Tooltip can be used to show a message when hovering over an element.",
  "Code mockup": "Code mockup",
  "Phone mockup": "Phone mockup",
  "Window mockup": "Window mockup",
  "File Input": "File Input",
  "Text Input": "Text Input",
  "Range slider": "Range slider",
  "Tabs": "Tabs",
  "All daisyUI components": "All daisyUI components",
  "Class name": "Class name",
  "Type": "Type",
  "Search": "Search",
  "daisyUI themes": "daisyUI themes",
  "How to use daisyUI themes?": "How to use daisyUI themes?",
  "daisyUI Theme Generator": "daisyUI Theme Generator",
  "You can add your custom themes to <span class='badge badge-outline'>tailwind.config.js</span> file in <span class='badge badge-outline'>daisyui > themes</span> array. On this page, you can pick required color values and see how the components will look like with them.": "You can add your custom themes to <span class='badge badge-outline'>tailwind.config.js</span> file in <span class='badge badge-outline'>daisyui > themes</span> array. On this page, you can pick required color values and see how the components will look like with them.",
  "You can also define optional colors to have more control on the color values (for example: the color of a button when it's focused on the color of the text on a button)": "You can also define optional colors to have more control on the color values (for example: the color of a button when it's focused on the color of the text on a button)",
  "Check out <a class='link font-bold' href='/docs/colors/'>colors page</a> to see all the color names you can use.": "Check out <a class='link font-bold' href='/docs/colors/'>colors page</a> to see all the color names you can use.",
  "Check out <a class='link font-bold' href='/docs/themes/'>themes page</a> to see all the CSS variables you can use to customize the design decision (example: border-radius, animations, etc.)": "Check out <a class='link font-bold' href='/docs/themes/'>themes page</a> to see all the CSS variables you can use to customize the design decision (example: border-radius, animations, etc.)",
  "Randomize": "Randomize",
  "Reset": "Reset",
  "Preview": "Preview",
  "Layout and Typography": "Layout and Typography",
  "How to use layouts and typography in daisyUI": "How to use layouts and typography in daisyUI",
  "Layout, sizing, grids, spacing, etc. all will be handled by Tailwind CSS's utility classes.": "Layout, sizing, grids, spacing, etc. all will be handled by Tailwind CSS's utility classes.",
  "Read more": "Read more",
  "Typography": "Typography",
  "You should use official <a href='https://github.com/tailwindlabs/tailwindcss-typography'>TailwindCSS Typography plugin</a>.": "You should use official <a href='https://github.com/tailwindlabs/tailwindcss-typography'>TailwindCSS Typography plugin</a>.",
  "It handles everything and it's fully customizable.": "It handles everything and it's fully customizable.",
  "daisyUI adds some style to @tailwindcss/typography so it will use the same theme as other elements.": "daisyUI adds some style to @tailwindcss/typography so it will use the same theme as other elements.",
  "Make sure you require <span class='badge badge-outline'>daisyui</span> AFTER <span class='badge badge-outline'>@tailwindcss/typography</span> in tailwind.config.js": "Make sure you require <span class='badge badge-outline'>daisyui</span> AFTER <span class='badge badge-outline'>@tailwindcss/typography</span> in tailwind.config.js",
  "Here you can see how elements will look using <code>@tailwindcss/typography</code>.": "Here you can see how elements will look using <code>@tailwindcss/typography</code>.",
  "To use a custom prefix, <a class='link' href='/docs/config/#prefix'>add your prefix string to config</a>": "To use a custom prefix, <a class='link' href='/docs/config/#prefix'>add your prefix string to config</a>",
  "Component": "Component",
  "Modifier": "Modifier",
  "Responsive": "Responsive",
  "Changes the style of a component": "Changes the style of a component",
  "Supports responsive prefixes (sm:, lg:, …)": "Supports responsive prefixes (sm:, lg:, …)",
  "Make your theme": "Make your theme",
  "More examples": "More examples",
  "Support daisyUI's development": "Support daisyUI's development",
  "The most popular": "The most popular",
  "component library": "component library",
  "for Tailwind CSS": "for Tailwind CSS",
  "daisyUI adds component class names to Tailwind&nbsp;CSS<br /> so you can make beautiful websites <span class='border-base-content/20 border-b-2'>faster than ever.</span>": "daisyUI adds component class names to Tailwind&nbsp;CSS<br /> so you can make beautiful websites <span class='border-base-content/20 border-b-2'>faster than ever.</span>",
  "don't re-invent <br/>the wheel <br/>every time": "don't re-invent <br/>the wheel <br/>every time",
  "In a Tailwind CSS project, you need to write utility class names for every element. Thousands of class names just to style the most basic elements.": "In a Tailwind CSS project, you need to write utility class names for every element. Thousands of class names just to style the most basic elements.",
  "instead of writing<br /> <span class='text-error'><span class='font-black'>100</span> class names</span>": "instead of writing<br /> <span class='text-error'><span class='font-black'>100</span> class names</span>",
  "For every element, every page, every project,<br/>again and again": "For every element, every page, every project,<br/>again and again",
  "use <span class='text-success'><span class='font-black'>semantic</span> <br />class names</span>": "use <span class='text-success'><span class='font-black'>semantic</span> <br />class names</span>",
  "It's descriptive, faster, cleaner and easier to maintain.": "It's descriptive, faster, cleaner and easier to maintain.",
  "Features": "Features",
  "Links": "Links",
  "Message": "Message",
  "Cleaner HTML": "Cleaner HTML",
  "Customizable": "Customizable",
  "Themeable": "Themeable",
  "Pure CSS": "Pure CSS",
  "Dashboard": "Dashboard",
  "Notifications": "Notifications",
  "Messages": "Messages",
  "People": "People",
  "Products": "Products",
  "Use Tailwind CSS but write fewer class names.": "Use Tailwind CSS but write fewer class names.",
  "Pure CSS. <br />No JS dependency": "Pure CSS. <br />No JS dependency",
  "Works on all frameworks": "Works on all frameworks",
  "Design system": "Design system",
  "Styling a simple button": "Styling a simple button",
  "Result": "Result",
  "Take Tailwind CSS": "Take Tailwind CSS",
  "to the next level": "to the next level",
  "daisyUI adds class names to Tailwind CSS<br />for all common UI components.<br />Class names like": "daisyUI adds class names to Tailwind CSS<br />for all common UI components.<br />Class names like",
  "and many more.": "and many more.",
  "This allows us to focus on important things<br />instead of styling basic elements for every project.": "This allows us to focus on important things<br />instead of styling basic elements for every project.",
  "No_more_ugly_HTML_part_1": "No",
  "No_more_ugly_HTML_part_2": "more",
  "No_more_ugly_HTML_part_3": "ugly",
  "No_more_ugly_HTML_part_4": "HTML",
  "Write fewer class names<br />Use component class names<br />modify them using Tailwind CSS utilities.": "Write fewer class names<br />Use component class names<br />modify them using Tailwind CSS utilities.",
  "Click": "Click",
  "Tailwind only": "Tailwind only",
  "Tailwind + daisyUI": "Tailwind + daisyUI",
  "Save": "Save",
  "Accept terms of use": "Accept terms of use",
  "Submit to newsletter": "Submit to newsletter",
  "Fewer class names": "Fewer class names",
  "Faster development": "Faster development",
  "Smaller file size": "Smaller file size",
  "With daisyUI, you write 80% fewer class names<br />And your HTML size will be about 70% smaller.": "With daisyUI, you write 80% fewer class names<br />And your HTML size will be about 70% smaller.",
  "CSS Class names": "CSS Class names",
  "fewer class names": "fewer class names",
  "HTML size": "HTML size",
  "smaller DOM size": "smaller DOM size",
  "Highly customizable": "Highly customizable",
  "Powered by Tailwind&nbsp;CSS utility&nbsp;classes": "Powered by Tailwind&nbsp;CSS utility&nbsp;classes",
  "daisyUI is built on top of Tailwind&nbsp;CSS so you can customize everything using utility classes.": "daisyUI is built on top of Tailwind&nbsp;CSS so you can customize everything using utility classes.",
  "Pure CSS.": "Pure CSS.",
  "Framework agnostic.": "Framework agnostic.",
  "Works everywhere.": "Works everywhere.",
  "daisyUI is a plugin for Tailwind CSS. It works on all JS frameworks and doesn't need a JS bundle file.": "daisyUI is a plugin for Tailwind CSS. It works on all JS frameworks and doesn't need a JS bundle file.",
  "Install daisyUI as a dev dependency and use the class names just like any other Tailwind CSS class name.": "Install daisyUI as a dev dependency and use the class names just like any other Tailwind CSS class name.",
  "Apply_your_own_design_decisions_part_1": "Apply",
  "Apply_your_own_design_decisions_part_2": "your",
  "Apply_your_own_design_decisions_part_3": "own",
  "Apply_your_own_design_decisions_part_4": "design",
  "Apply_your_own_design_decisions_part_5": "decisions",
  "Your website should be unique. Create a custom theme for yourself using daisyUI theme generator. The colors you pick will be applied to all daisyUI components.": "Your website should be unique. Create a custom theme for yourself using daisyUI theme generator. The colors you pick will be applied to all daisyUI components.",
  "Learn more about themes": "Learn more about themes",
  "utility classes": "utility classes",
  "endless possibilities": "endless possibilities",
  "Mix and match daisyUI class names to create unique web pages.": "Mix and match daisyUI class names to create unique web pages.",
  "daisyUI is the most popular<br />component library for Tailwind&nbsp;CSS": "daisyUI is the most popular<br />component library for Tailwind&nbsp;CSS",
  "open-source projects using daisyUI": "open-source projects using daisyUI",
  "Free and open-source": "Free and open-source",
  "Built by the community": "Built by the community",
  "daisyUI welcomes contributions from developers around the world": "daisyUI welcomes contributions from developers around the world",
  "Sponsors and backers": "Sponsors and backers",
  "Try daisyUI": "Try daisyUI",
  "on your favorite framework": "on your favorite framework",
  "See all examples": "See all examples",
  "Or play with daisyUI on": "Or play with daisyUI on",
  "Admin panel": "Admin panel",
  "Updates": "Updates",
  "Stats": "Stats",
  "Unlimited themes": "Unlimited themes",
  "with zero effort": "with zero effort",
  "daisyUI adds a set of customizable color names to Tailwind CSS and these new colors use CSS variables for the values. Using daisyUI color names, you get Dark Mode and even more themes without adding a new class name.": "daisyUI adds a set of customizable color names to Tailwind CSS and these new colors use CSS variables for the values. Using daisyUI color names, you get Dark Mode and even more themes without adding a new class name.",
  "See all themes": "See all themes",
  "Semantic colors": "Semantic colors",
  "Learn more about colors": "Learn more about colors",
  "Get started": "Get started",
  "daisyUI 3 is available now!": "daisyUI 3 is available now!",
  "Become a sponsor": "Become a sponsor",
  "Accordion": "Accordion",
  "Accordion is used for showing and hiding content but only one item can stay open at a time.": "Accordion is used for showing and hiding content but only one item can stay open at a time.",
  "Accordion uses the same style as the <a href='/components/collapse/' class='link'>collapse component</a> but it works with radio inputs. You can control which item to be open by checking/unchecking the hidden radio input.": "Accordion uses the same style as the <a href='/components/collapse/' class='link'>collapse component</a> but it works with radio inputs. You can control which item to be open by checking/unchecking the hidden radio input.",
  "Click to open this one and close others": "Click to open this one and close others",
  "Using Accordion and Join together": "Using Accordion and Join together",
  "All radio inputs with the same name work together and only one of them can be open at a time. If you have more than one set of accordion items on a page, use different names for the radio inputs on each set.": "All radio inputs with the same name work together and only one of them can be open at a time. If you have more than one set of accordion items on a page, use different names for the radio inputs on each set.",
  "Join": "Join",
  "Join is a container for grouping multiple items, it can be used to group buttons, inputs, or any other element. Join applies border radius to the first and last item. Join can be used to create a horizontal or vertical list of items.": "Join is a container for grouping multiple items, it can be used to group buttons, inputs, or any other element. Join applies border radius to the first and last item. Join can be used to create a horizontal or vertical list of items.",
  "Loading": "Loading",
  "Loading shows an animation to indicate that something is loading.": "Loading shows an animation to indicate that something is loading.",
  "Browser mockup": "Browser mockup",
  "Browser mockup shows a box that looks like a browser window.": "Browser mockup shows a box that looks like a browser window.",
  "Browser": "Browser",
  "you need to change the `--value` CSS variable using JS. Value must be a number between 0 and 99.": "you need to change the `--value` CSS variable using JS. Value must be a number between 0 and 99.",
  "How to add custom styles for a specific theme?": "How to add custom styles for a specific theme?",
  "You can write custom style for your elements only for a specific theme.": "You can write custom style for your elements only for a specific theme.",
  "In this example, .btn-twitter class only will have this style on light theme.": "In this example, .btn-twitter class only will have this style on light theme.",
  "related projects": "related projects",
  "There are 3 ways to use a modal:": "There are 3 ways to use a modal:",
  "Make sure you're using unique IDs for each modal": "Make sure you're using unique IDs for each modal",
  "Also see <a href='/components/accordion/' class='link'>accordion</a> examples": "Also see <a href='/components/accordion/' class='link'>accordion</a> examples",
  "Radial progress needs `--value` CSS variable to work.<br />To change the size, use `--size` CSS variable which has a default value of `4rem`.<br />To change the thickness, use `--thickness` CSS variable which is 10% of the size by default.<br />": "Radial progress needs `--value` CSS variable to work.<br />To change the size, use `--size` CSS variable which has a default value of `4rem`.<br />To change the thickness, use `--thickness` CSS variable which is 10% of the size by default.<br />",
  "Deprecated": "Deprecated",
  "Drawer sidebar is hidden by default. You can make it visible on larger screens using <code>lg:drawer-open</code> class (or using other responsive prefixes: <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xl</code>)": "Drawer sidebar is hidden by default. You can make it visible on larger screens using <code>lg:drawer-open</code> class (or using other responsive prefixes: <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xl</code>)",
  "Join (group items)": "Join (group items)",
  "This component is deprecated and will be removed in the next major version. Use <a class='link' href='/components/join'>Join</a> instead.": "This component is deprecated and will be removed in the next major version. Use <a class='link' href='/components/join'>Join</a> instead.",
  "Docs": "Docs",
  "Components": "Components",
  "Which element to attach the theme CSS variables to.": "Which element to attach the theme CSS variables to.",
  "In certain situations (such as embedding daisyUI in a shadow root) it may be useful to set this to e.g. <code>*</code>, so all components will have access to the required CSS variables.": "In certain situations (such as embedding daisyUI in a shadow root) it may be useful to set this to e.g. <code>*</code>, so all components will have access to the required CSS variables.",
  "Utilities": "Utilities",
  "Utility classes and CSS variables": "Utility classes and CSS variables",
  "Additional utility classes and CSS variables that daisyUI uses for components and themes": "Additional utility classes and CSS variables that daisyUI uses for components and themes",
  "Color utility classes": "Color utility classes",
  "All daisyUI colors can be used as utility classes. Just like any other Tailwind CSS color. For example you can use `primary` color with any of Tailwind CSS color utilities.": "All daisyUI colors can be used as utility classes. Just like any other Tailwind CSS color. For example you can use `primary` color with any of Tailwind CSS color utilities.",
  "Border radius": "Border radius",
  "These extended border radius are being used in daisyUI components. The values depend on the theme so you can have a different design decision about border radius of elements based on the active theme. You can use any Tailwind CSS border radius class for these names as well. Like `rounded-r-box` or `rounded-tr-btn`": "These extended border radius are being used in daisyUI components. The values depend on the theme so you can have a different design decision about border radius of elements based on the active theme. You can use any Tailwind CSS border radius class for these names as well. Like `rounded-r-box` or `rounded-tr-btn`",
  "Glass": "Glass",
  "These glass class to give elements a matte glass effect": "These glass class to give elements a matte glass effect",
  "CSS variables": "CSS variables",
  "These CSS variables are being used internally. You can customize them in your custom theme in `tailwind.config.js` or you can even customize them with a class name like `[--animation-btn:0]`": "These CSS variables are being used internally. You can customize them in your custom theme in `tailwind.config.js` or you can even customize them with a class name like `[--animation-btn:0]`",
  "Component specific CSS variables": "Component specific CSS variables",
  "These CSS variables are being used internally for a specific component": "These CSS variables are being used internally for a specific component",
  "Theme Controller": "Theme Controller",
  "If a checked checkbox input or a checked radio input with theme-controller class exists in the page, The page will have the same theme as that input's value.": "If a checked checkbox input or a checked radio input with theme-controller class exists in the page, The page will have the same theme as that input's value.",
  "Theme Controller changes the theme using CSS only. You can then use JS to save the input state in the server or localStorage if you want it to persist on page refresh. <br/>Here's a React example to save checkbox state in local storage:": "Theme Controller changes the theme using CSS only. You can then use JS to save the input state in the server or localStorage if you want it to persist on page refresh. <br/>Here's a React example to save checkbox state in local storage:",
  "Diff": "Diff",
  "Diff component shows a side-by-side comparison of two items.": "Diff component shows a side-by-side comparison of two items.",
  "Timeline": "Timeline",
  "Timeline component shows a list of events in chronological order.": "Timeline component shows a list of events in chronological order.",
  "The <span class=badge>hr</span> tag at the start or end of each item, displays a line to connect items.": "The <span class=badge>hr</span> tag at the start or end of each item, displays a line to connect items.",
  "Feedback": "Feedback",
  "Skeleton": "Skeleton",
  "Skeleton is a component that can be used to show a loading state of a component.": "Skeleton is a component that can be used to show a loading state of a component.",
  "Container element": "Container element",
  "Using <code>&lt;dialog&gt;</code> element: It needs JS to open but it has better accessibility and we can close it using <span class='kbd kbd-xs'>Esc</span> key": "Using <code>&lt;dialog&gt;</code> element: It needs JS to open but it has better accessibility and we can close it using <span class='kbd kbd-xs'>Esc</span> key",
  "Using a hidden <code>&lt;input type='checkbox'&gt;</code> and <code>&lt;label&gt;</code> to check/uncheck the checkbox and open/close the modal": "Using a hidden <code>&lt;input type='checkbox'&gt;</code> and <code>&lt;label&gt;</code> to check/uncheck the checkbox and open/close the modal",
  "Using <code>&lt;a&gt;</code> anchor links: A link adds a parameter to the URL and you only see the modal when the URL has that parameter": "Using <code>&lt;a&gt;</code> anchor links: A link adds a parameter to the URL and you only see the modal when the URL has that parameter",
  "This component is deprecated and will be removed in the next major version. Use <a class='link' href='/components/join/'>Join</a> instead.": "This component is deprecated and will be removed in the next major version. Use <a class='link' href='/components/join/'>Join</a> instead.",
  "Blog": "Blog",
  "Sponsors": "Sponsors",
  "Use daisyUI from CDN": "Use daisyUI from CDN",
  "How to use daisyUI from a CDN?": "How to use daisyUI from a CDN?",
  "etc.": "etc.",
  "": ""
}