- AN
- The Angular meta-framework – build Angular applications faster.
-
+ AN
+ The Angular meta-framework – build Angular applications faster.
+The Angular meta-framework – build Angular applications faster.
- The king, seeing how much happier his subjects were, realized the error of his ways and repealed the joke - tax. -
-+ The king, seeing how much happier his subjects were, realized the error of his ways and repealed the joke + tax. +
+- "After all," he said, "everyone enjoys a good joke, so it's only fair that they should pay for the - privilege." --
+ "After all," he said, "everyone enjoys a good joke, so it's only fair that they should pay for the + privilege." ++
@radix-ui/react-alert-dialog
- @radix-ui/react-alert-dialog
+ - A modal dialog that interrupts the user with important content and expects a response. -
-+ A modal dialog that interrupts the user with important content and expects a response. +
+Are you sure absolutely sure?
-Are you sure absolutely sure?
+Email address
-Email address
+Enter your email address.
-Enter your email address.
+
- Adding spartan/ui to your project requires only a couple steps!
-
If you are already using Nx, start with installing our plugin:
-
- spartan/ui is built on top of TailwindCSS. Make sure your application has a
- working TailwindCSS setup before you continue.
-
- spartan/ui comes with a core package. To get started install this package with
- the command below:
-
- You now have to add our spartan-specific configuration to your TailwindCSS setup. To make the setup of your
- tailwind.config.js as easy as possible, the
- @spartan-ng/ui-core package comes with it own preset.
-
Simply add it to the presets array of your config file:
-
+ Adding
+ spartan/ui
+ to your project requires only a couple steps!
+
If you are already using Nx, start with installing our plugin:
+
+ spartan/ui
+ is built on top of TailwindCSS. Make sure your application has a working TailwindCSS setup before you
+ continue.
+
+ spartan/ui
+ comes with a core package. To get started install this package with the command below:
+
+ You now have to add our spartan-specific configuration to your TailwindCSS setup. To make the setup of your
+ tailwind.config.js
+ as easy as possible, the
+ @spartan-ng/ui-core
+ package comes with it own preset.
+
Simply add it to the presets array of your config file:
+
- To complete your TailwindCSS setup, you need to add our spartan-specific CSS variables to your style
- entrypoint. This is most likely a styles.css in the
- src folder of your application.
-
- Again, if you are using Nx, we have written a plugin that will take care of the heavy lifting: -
-To learn more about the Nx plugin check out the CLI docs below.
- -
- If you are not using Nx (yet) you can copy the variables of the default theme below and manually add them to
- your style entrypoint, such as
- styles.css:
-
+ To complete your TailwindCSS setup, you need to add our spartan-specific CSS variables to your style
+ entrypoint. This is most likely a
+ styles.css
+ in the
+ src
+ folder of your application.
+
+ Again, if you are using Nx, we have written a plugin that will take care of the heavy lifting: +
+To learn more about the Nx plugin check out the CLI docs below.
+ +
+ If you are not using Nx (yet) you can copy the variables of the default theme below and manually add them to
+ your style entrypoint, such as
+ styles.css
+ :
+
- Also, make sure to check out the theming section to better understand the convention behind them and learn how - to customize your theme. -
-+ Also, make sure to check out the theming section to better understand the convention behind them and learn how + to customize your theme. +
+- With the Nx plugin, adding primitives is as simple as running a single command. It will allow you to pick and - choose which primitives to add to your project. It will add all brain dependencies and copy helm code into its - own library: -
-To learn more about the Nx plugin check out the CLI docs below.
- -- Known issue: Dependencies are added to package.json, but their peer dependencies are not automatically - installed -
-- It seems like the Nx generator does not install the peer dependencies for new dependencies added to the - package.json of the project when running the "install dependencies" task inside its execution context. - - Workaround: Manually run npm i after the plugin adds the primtives. - -
-- If you are not using Nx (yet) you can follow the guide on how to manually install the primitive on the - respective documentation page. -
-+ With the Nx plugin, adding primitives is as simple as running a single command. It will allow you to pick and + choose which primitives to add to your project. It will add all brain dependencies and copy helm code into its + own library: +
+To learn more about the Nx plugin check out the CLI docs below.
+ ++ If you are not using Nx (yet) you can follow the guide on how to manually install the primitive on the + respective documentation page. +
+
- spartan/ui is an open-source collection of an initial 30 UI primitives
- designed to streamline your development process and empower your Angular projects with enhanced efficiency and
- accessibility.
-
- Creating seamless, captivating, and accessible user interfaces is hard. Through
- spartan/ui/brain, our goal is to make this process more straightforward and
- efficient. We offer a versatile collection of unstyled UI building blocks that can be easily tailored to match
- your project's distinct visual and functional preferences.
-
- Additionally, with spartan/ui/helm, we provide pre-designed styles that not
- only look great from the start but also let you to retain full control over their code, appearance, and
- overall experience.
-
- Each spartan/ui/brain represents a headless and accessible implementation of
- an UI primitive. This can be a standalone Angular Component, a Directive applied to existing HTML elements, or
- a hybrid combining both for more intricate UI elements.
-
- This brain-first approach empowers developers to build UI components with enhanced accessibility and - modularity, offering flexibility in crafting custom interfaces that cater to diverse project requirements. -
-- On top of these brain components we put our helmet. Our helmet adds SPARTAN-like swagger to our UI. -
-
- Unlike it's brain counterparts, spartan/ui/helm primitives are not libraries.
- Instead, just like with shadcn, they are recipes, which code you can copy directly into your own project.
-
- To make this as easy as possible, spartan/ui comes equipped with an Nx plugin
- that allows you to effortlessly integrate our components into your Nx workspace. With a single command, you
- can add any of the 30 spartan/ui primitives to your projects.
-
- But that's not all – the Nx plugin's capabilities extend beyond just adding components. You can also leverage - it to incorporate one of 12 custom themes into your Nx applications, letting you truly own the visual - appearance of your projects. -
-The initial 30 components we launch today are:
-hlmInput directive)
- - Excited to try any of these? What are you waiting for? Head over to the installation page and start your - spartan journey! -
- -
+ spartan/ui
+ is an open-source collection of an initial 30 UI primitives designed to streamline your development process
+ and empower your Angular projects with enhanced efficiency and accessibility.
+
+ Creating seamless, captivating, and accessible user interfaces is hard. Through
+ spartan/ui/brain
+ , our goal is to make this process more straightforward and efficient. We offer a versatile collection of
+ unstyled UI building blocks that can be easily tailored to match your project's distinct visual and functional
+ preferences.
+
+ Additionally, with
+ spartan/ui/helm
+ , we provide pre-designed styles that not only look great from the start but also let you to retain full
+ control over their code, appearance, and overall experience.
+
+ Each
+ spartan/ui/brain
+ represents a headless and accessible implementation of an UI primitive. This can be a standalone Angular
+ Component, a Directive applied to existing HTML elements, or a hybrid combining both for more intricate UI
+ elements.
+
+ This brain-first approach empowers developers to build UI components with enhanced accessibility and + modularity, offering flexibility in crafting custom interfaces that cater to diverse project requirements. +
++ On top of these brain components we put our helmet. Our helmet adds SPARTAN-like swagger to our UI. +
+
+ Unlike it's brain counterparts,
+ spartan/ui/helm
+ primitives are not libraries. Instead, just like with shadcn, they are recipes, which code you can copy
+ directly into your own project.
+
+ To make this as easy as possible,
+ spartan/ui
+ comes equipped with an Nx plugin that allows you to effortlessly integrate our components into your Nx
+ workspace. With a single command, you can add any of the 30
+ spartan/ui
+ primitives to your projects.
+
+ But that's not all – the Nx plugin's capabilities extend beyond just adding components. You can also leverage + it to incorporate one of 12 custom themes into your Nx applications, letting you truly own the visual + appearance of your projects. +
+The initial 30 components we launch today are:
+hlmInput
+ directive)
+
+ + Excited to try any of these? What are you waiting for? Head over to the installation page and start your + spartan journey! +
+ +- Ultimately our goal is to provide a standalone CLI that allows you to simply add spartan primitives to any - Angular project. -
-
- However, our initial focus is to provide a tight integration with the
- spartan/stack, which runs on Nx. Therefore, the initial version of our CLI is
- a Nx plugin.
-
+ Ultimately our goal is to provide a standalone CLI that allows you to simply add spartan primitives to any + Angular project. +
+
+ However, our initial focus is to provide a tight integration with the
+ spartan/stack
+ , which runs on Nx. Therefore, the initial version of our CLI is a Nx plugin.
+
- To add spartan to your Nx workspace simply install the plugin with the
- command below:
-
+ To add
+ spartan
+ to your Nx workspace simply install the plugin with the command below:
+
- To add spartan/ui primitives to your workspace run the following command:
-
- You can then select which primitives you want to add. For each primitive we create a buildable library at a - path of your choice. -
+
+ To add
+ spartan/ui
+ primitives to your workspace run the following command:
+
+ You can then select which primitives you want to add. For each primitive we create a buildable library at a + path of your choice. +
+- Known issue: Dependencies are added to package.json, but their peer dependencies are not automatically - installed -
-- It seems like the Nx generator does not install the peer dependencies for new dependencies added to the - package.json of the project when running the "install dependencies" task inside its execution context. - - Workaround: Manually run npm i after the plugin adds the primtives. - -
-Adding a theme can also be done on itself. Use the command below:
++ You can then select which application you want to add the theme to. Where your styles entrypoint is located. + Which theme to add & what border radius to use. +
+Adding a theme can also be done on itself. Use the command below:
-- You can then select which application you want to add the theme to. Where your styles entrypoint is located. - Which theme to add & what border radius to use. -
-