{"id":19848774,"url":"https://github.com/tailus-ui/themer","last_synced_at":"2025-05-01T22:30:37.102Z","repository":{"id":200409635,"uuid":"688349220","full_name":"Tailus-UI/themer","owner":"Tailus-UI","description":"Modern theming library for building custom web UIs with tailwindcss and modern Web frameworks","archived":false,"fork":false,"pushed_at":"2024-04-12T17:53:03.000Z","size":589,"stargazers_count":24,"open_issues_count":5,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-04-14T06:47:59.520Z","etag":null,"topics":["astro","react","svelte","tailwindcss-v3","ui-components","vue","web"],"latest_commit_sha":null,"homepage":"https://beta.tailus.io/docs/themer/introduction","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Tailus-UI.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2023-09-07T07:02:40.000Z","updated_at":"2024-04-15T07:50:38.153Z","dependencies_parsed_at":null,"dependency_job_id":"f473b331-2196-436e-b187-fc0915d4cb8e","html_url":"https://github.com/Tailus-UI/themer","commit_stats":null,"previous_names":["tailus-ui/themer"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tailus-UI%2Fthemer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tailus-UI%2Fthemer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tailus-UI%2Fthemer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tailus-UI%2Fthemer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Tailus-UI","download_url":"https://codeload.github.com/Tailus-UI/themer/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251954694,"owners_count":21670854,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["astro","react","svelte","tailwindcss-v3","ui-components","vue","web"],"created_at":"2024-11-12T13:18:20.165Z","updated_at":"2025-05-01T22:30:36.712Z","avatar_url":"https://github.com/Tailus-UI.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Tailus Themer\n\nTailwind CSS Styling Library for Building Modern, Consistent and Accessible Web UIs with Radix UI, Melt UI, and Radix Vue.\n\n## Concept\n\nImagine Tailus Themer as a secret style vault for our UI Kits. It uses Tailwind CSS, making it super easy to customize the look and feel of your components. This means you get a consistent design foundation across all these UI Kits, but with the freedom to tweak things to perfectly match your brand.\n\n## Features\n\n-   🎨 Built-in Palettes\n-   🎨 Multi-Theming\n-   🛠️ Effortless Customization\n-   🚀 Expanded Component Variants\n-   ♿ Accessibility First\n-   🌟 Modern \u0026 Trendy\n\n## Quick Start\n\n1. **Install Tailus Themer:**\n\n```bash\nnpm install @tailus/themer\n```\n\n2. **Update your tailwindcss config**\n\n    Import the themer preset to set default theme and enable data-attributes customizations\n\n```javascript\nimport type { Config } from 'tailwindcss'\nimport { themer, grayColorVariables } from '@tailus/themer'\n\nmodule.exports =  {\n  content: [\n    // your other paths\n    \"./node_modules/@tailus/themer/dist/**/*.{js,ts}\",\n  ],\n  theme: {\n    extend: {\n      colors: {\n        gray: grayColorVariables,\n      },\n    },\n  },\n  presets: [\n    themer\n  ]\n} satisfies Config\n```\n\nUnder normal circumstances, it's not necessary to add the `gray` color to your Tailwind CSS configuration. However, because Tailwind CSS generates the `gray` color from the `defaultTheme` object, you must include it in your configuration to prevent any errors.\n\n## Customize your theme\n\nUse `data-attributes` to customize your theme\n\n### Palette\n\nUse the `data-palette` attribute to change the color palette of your theme.\n\n```html\n\u003chtml data-palette=\"trust\"\u003e\u003c/html\u003e\n```\n\n[Learn more about palette customization]()\n\nThe available palettes are:\n\n-   `trust`\n-   `romance`\n-   `passion`\n-   `nature`\n-   `energy`\n-   `mystery`\n-   `oz`\n-   `spring`\n-   `winter`\n\n#### Multi-Theming\n\nThe `palette` plugin comes with a variety of palettes built with the tailwindcss default colors. You can effortlessly switch between these palettes or even allow your users to select the palette they prefer.\n\n[Learn more about muilti-theming]()\n\n### Shade\n\nYou can adjust the background and border colors of your theme using the `data-shade` attribute. This change is more noticeable in dark mode.\n\n```html\n\u003chtml data-shade=\"900\"\u003e\u003c/html\u003e\n```\n\nThe available shades are:\n\n-   `800`\n-   `900`\n-   `925`\n-   `950`\n-   `glassy`\n\n[Learn more about the shade plugin]()\n\n### Rounded\n\nYou can adjust the border radius of your theme using the `data-rounded` attribute.\n\n```html\n\u003chtml data-rounded=\"xlarge\"\u003e\u003c/html\u003e\n```\n\nThe available rounded values are:\n\n-   `none`\n-   `default`\n-   `small`\n-   `medium`\n-   `large`\n-   `xlarge`\n-   `2xlarge`\n-   `3xlarge`\n-   `full`\n\n[Learn more about the rounded plugin]()\n\n### Shadow\n\nYou can adjust the shadow of your theme using the `data-shadow` attribute. ( ⚠️ Not yet available)\n\n```html\n\u003chtml data-shadow=\"medium\"\u003e\u003c/html\u003e\n```\n\nThe available shadow values are:\n\n[Learn more about the rounded plugin]()\n\n## Contributing\n\nTailus Themer is an open source project and contributions from the community are always the welcome. If you have any ideas or suggestions for how to improve Tailus Themer, please feel free to open an issue or submit a pull request.\n\n## Support\n\nIf you have any questions or need help with using Tailus Themer, please feel free to reach out on Twitter.\n\n## License\n\nTailus Themer is licensed under the MIT license.\n\n## Author\n\n-   [Méschac Irung](https://twitter.com/meschacirung)\n\n## Credits\n\n-   [Tailwind CSS](https://www.tailwindcss.com)\n-   [Radix UI](https://www.radix-ui.com/)\n-   [Tailwind Variants](https://www.tailwind-variants.org/docs/introduction)\n-   [Flowbite Theme](https://flowbite.com/)\n-   Special thanks to [Shekinah Tshiokufila](https://twitter.com/tshiokufila) for the continuous support and feedback.\n-   Special thanks to [Théo Balick](https://twitter.com/theo_balick) whose brainstorming sessions and research fueled the creation of Tailus Themer.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftailus-ui%2Fthemer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftailus-ui%2Fthemer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftailus-ui%2Fthemer/lists"}