Skip to content

Commit 4bf734c

Browse files
fzaninottofzaninotto
committed
Add list of supported UI kits
1 parent a89045c commit 4bf734c

File tree

6 files changed

+379
-22
lines changed

6 files changed

+379
-22
lines changed

‎assets/index-92c2f32a.css‎

Lines changed: 6 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎assets/index-9558c155.js‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎img/shadcn-logo.svg‎

Lines changed: 8 additions & 0 deletions
Loading

‎index.html‎

Lines changed: 179 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,8 @@
2323
content="https://marmelab.com/react-admin/img/react-admin-banner.jpg"
2424
/>
2525

26-
<script type="module" crossorigin src="./assets/index-3c263a29.js"></script>
27-
<link rel="stylesheet" href="./assets/index-d537f6f8.css">
26+
<script type="module" crossorigin src="./assets/index-9558c155.js"></script>
27+
<link rel="stylesheet" href="./assets/index-92c2f32a.css">
2828
</head>
2929

3030
<body>
@@ -947,6 +947,182 @@ <h3 class="text-[24px] font-bold leading-[28px] text-[#00023b]">
947947
</div>
948948
</section>
949949

950+
<section class="bg-[#e7e8f3] text-[#00023b]">
951+
<div
952+
class="mx-auto max-w-screen-xl px-4 py-8 md:px-12 md:py-16 lg:px-24 lg:py-24"
953+
>
954+
<h1
955+
class="mb-8 text-center text-[28px] font-bold leading-[34px] lg:text-[32px] lg:leading-[40px]"
956+
>
957+
Works With Any UI Kit
958+
</h1>
959+
<p
960+
class="mb-12 text-center text-[18px] font-light leading-[26px] lg:text-[21px] lg:leading-[28px]"
961+
>
962+
React-admin is flexible and adapts to your design system.<br />
963+
Choose from our ready-made implementations or build your own.
964+
</p>
965+
<div class="mx-auto grid max-w-5xl grid-cols-1 gap-8 md:grid-cols-3">
966+
<div
967+
class="flex flex-col items-center rounded-xl bg-white p-8 text-center"
968+
>
969+
<svg
970+
xmlns="http://www.w3.org/2000/svg"
971+
fill="none"
972+
alt="Material UI"
973+
class="mb-6 h-20 w-20"
974+
viewBox="0 0 24 24"
975+
>
976+
<path
977+
fill="#0073E6"
978+
fill-rule="evenodd"
979+
d="M24 5.601V1.592a.344.344 0 0 0-.514-.298l-2.64 1.508a.688.688 0 0 0-.346.597v4.009c0 .264.285.43.514.298l2.64-1.508A.688.688 0 0 0 24 5.6ZM.515 1.295l7.643 4.383a.688.688 0 0 0 .684 0l7.643-4.383a.344.344 0 0 1 .515.298v12.03c0 .235-.12.453-.319.58l-4.65 2.953 3.11 1.832c.22.13.495.127.713-.009l4.61-2.878a.344.344 0 0 0 .161-.292v-4.085c0-.254.14-.486.362-.606l2.507-1.346a.344.344 0 0 1 .506.303v7.531c0 .244-.13.47-.34.593l-7.834 4.592a.688.688 0 0 1-.71-.009l-5.953-3.681A.344.344 0 0 1 9 18.808v-3.624c0-.115.057-.222.153-.286l4.04-2.694a.688.688 0 0 0 .307-.572v-4.39a.137.137 0 0 0-.208-.117l-4.44 2.664a.688.688 0 0 1-.705.002L3.645 7.123a.138.138 0 0 0-.208.118v7.933a.344.344 0 0 1-.52.295L.5 14.019C.19 13.833 0 13.497 0 13.135V1.593c0-.264.286-.43.515-.298Z"
980+
clip-rule="evenodd"
981+
/>
982+
</svg>
983+
<h3 class="mb-4 text-[24px] font-bold leading-[28px]">
984+
Material UI
985+
</h3>
986+
<p class="mb-6 text-[18px] font-light leading-[26px]">
987+
The default implementation with Google's Material Design.
988+
Production-ready with 230+ components.
989+
</p>
990+
<a
991+
href="./documentation.html"
992+
class="mt-auto inline-flex items-center text-[18px] font-semibold text-[#ea1763] hover:underline"
993+
>
994+
React-admin
995+
<img
996+
src="./img/arrow-right.svg"
997+
alt="arrow right icon"
998+
class="ml-1"
999+
width="25"
1000+
height="27"
1001+
/>
1002+
</a>
1003+
</div>
1004+
<div
1005+
class="flex flex-col items-center rounded-xl bg-white p-8 text-center"
1006+
>
1007+
<div class="mb-6 flex h-20 w-20 items-center justify-center">
1008+
<svg
1009+
viewBox="0 0 256 256"
1010+
version="1.1"
1011+
id="svg2"
1012+
sodipodi:docname="shadcn-logo.svg"
1013+
inkscape:version="1.4.2 (ebf0e940d0, 2025-05-08)"
1014+
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
1015+
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
1016+
xmlns="http://www.w3.org/2000/svg"
1017+
xmlns:svg="http://www.w3.org/2000/svg"
1018+
>
1019+
<defs id="defs2" />
1020+
<sodipodi:namedview
1021+
id="namedview2"
1022+
pagecolor="#ffffff"
1023+
bordercolor="#000000"
1024+
borderopacity="0.25"
1025+
inkscape:showpageshadow="2"
1026+
inkscape:pageopacity="0.0"
1027+
inkscape:pagecheckerboard="0"
1028+
inkscape:deskcolor="#d1d1d1"
1029+
inkscape:zoom="3.4023438"
1030+
inkscape:cx="127.85304"
1031+
inkscape:cy="128"
1032+
inkscape:window-width="1920"
1033+
inkscape:window-height="1124"
1034+
inkscape:window-x="0"
1035+
inkscape:window-y="40"
1036+
inkscape:window-maximized="1"
1037+
inkscape:current-layer="svg2"
1038+
/>
1039+
<rect
1040+
width="256"
1041+
height="256"
1042+
fill="#000000"
1043+
id="rect1"
1044+
ry="24.982779"
1045+
x="0"
1046+
y="0"
1047+
/>
1048+
<line
1049+
x1="208"
1050+
y1="128"
1051+
x2="128"
1052+
y2="208"
1053+
fill="none"
1054+
stroke="white"
1055+
stroke-linecap="round"
1056+
stroke-linejoin="round"
1057+
stroke-width="16"
1058+
id="line1"
1059+
/>
1060+
<line
1061+
x1="192"
1062+
y1="40"
1063+
x2="40"
1064+
y2="192"
1065+
fill="none"
1066+
stroke="white"
1067+
stroke-linecap="round"
1068+
stroke-linejoin="round"
1069+
stroke-width="16"
1070+
id="line2"
1071+
/>
1072+
</svg>
1073+
</div>
1074+
<h3 class="mb-4 text-[24px] font-bold leading-[28px]">Shadcn/ui</h3>
1075+
<p class="mb-6 text-[18px] font-light leading-[26px]">
1076+
Modern, accessible components built with Radix UI and Tailwind CSS
1077+
for a sleek design.
1078+
</p>
1079+
<a
1080+
href="https://marmelab.com/shadcn-admin-kit/"
1081+
class="mt-auto inline-flex items-center text-[18px] font-semibold text-[#ea1763] hover:underline"
1082+
>
1083+
Shadcn Admin Kit
1084+
<img
1085+
src="./img/arrow-right.svg"
1086+
alt="arrow right icon"
1087+
class="ml-1"
1088+
width="25"
1089+
height="27"
1090+
/>
1091+
</a>
1092+
</div>
1093+
<div
1094+
class="flex flex-col items-center rounded-xl bg-white p-8 text-center"
1095+
>
1096+
<img
1097+
src="./img/features/headless.svg"
1098+
alt="Headless"
1099+
class="mb-6 h-20 w-20"
1100+
width="80"
1101+
height="80"
1102+
/>
1103+
<h3 class="mb-4 text-[24px] font-bold leading-[28px]">Headless</h3>
1104+
<p class="mb-6 text-[18px] font-light leading-[26px]">
1105+
Unstyled components and hooks. Build your own UI with complete
1106+
design freedom.
1107+
</p>
1108+
<a
1109+
href="https://marmelab.com/ra-core"
1110+
class="mt-auto inline-flex items-center text-[18px] font-semibold text-[#ea1763] hover:underline"
1111+
>
1112+
Ra-Core
1113+
<img
1114+
src="./img/arrow-right.svg"
1115+
alt="arrow right icon"
1116+
class="ml-1"
1117+
width="25"
1118+
height="27"
1119+
/>
1120+
</a>
1121+
</div>
1122+
</div>
1123+
</div>
1124+
</section>
1125+
9501126
<section class="bg-[#00023b] text-[#999bba]">
9511127
<div class="mx-auto max-w-screen-xl py-8 text-white md:py-16 lg:py-24">
9521128
<div class="px-4 md:px-12 lg:px-16 xl:px-24">
@@ -1821,7 +1997,7 @@ <h3 class="text-[24px] font-bold leading-[28px] text-[#00023b]">
18211997
</h1>
18221998
<div class="flex justify-center">
18231999
<ul
1824-
class="grid grid-cols-2 gap-6 text-[18px] font-light leading-[20px] md:grid-cols-6"
2000+
class="grid grid-cols-2 gap-6 text-[18px] font-light leading-[20px] md:grid-cols-5"
18252001
>
18262002
<li class="flex flex-col items-center justify-end gap-4">
18272003
<img
@@ -1833,15 +2009,6 @@ <h3 class="text-[24px] font-bold leading-[28px] text-[#00023b]">
18332009
/>
18342010
<span class="text-center">React</span>
18352011
</li>
1836-
<li class="flex flex-col items-center justify-end gap-4">
1837-
<img
1838-
src="./img/material-ui.png"
1839-
alt="Material-ui"
1840-
width="61"
1841-
height="62"
1842-
/>
1843-
<span class="text-center">Material UI</span>
1844-
</li>
18452012
<li class="flex flex-col items-center justify-end gap-4">
18462013
<img
18472014
src="./img/react-router.png"

0 commit comments

Comments
 (0)